# Size

## Box sizing

The box-sizing property determines how the size of an element is calculated. It specifies whether the width and height of an element should include padding and borders, or just the content itself.

By default, the box-sizing property is set to `content-box`, which means that the width and height of an element only include the content and do not include any padding or borders.

Alternatively, if set to `border-box`, the width and height values of an element include padding and border. This can be useful for creating consistent element sizes, especially in complex layouts.

## Width

The `width` property specifies the width of an element. It can be set in pixels(px), percentages(%), or other length units. By default, the width of an element is automatically set by the content it contains.

Valid Example: 

* 100% 
* 60%
* 32px
* 100vh

## Height

The `height` property specifies the height of an element. It can be set in pixels(px), percentages(%), or other length units. By default, the height of an element is automatically set by the content it contains.

* 100% 
* 60%
* 32px
* 100vh

## Min Width

The `min-width` property sets a minimum width for an element. This means that if the content of the element requires a width greater than the specified minimum, the element will expand to the required size.

## Max Width

The `max-width` property sets a maximum width for an element. This means that if the content of the element requires a width greater than the specified maximum, it will be clipped and not visible.

## Min Height

The `min-height` property sets a minimum height for an element. This means that if the content of the element requires a height greater than the specified minimum, the element will expand to the required size.

## Max Height

The `max-height` property sets a maximum height for an element. This means that if the content of the element requires a height greater than the specified maximum, it will be clipped and not visible.

## Overflow X

The `overflow-x` property specifies what to do with content that overflows an element's width. The values it can take are `visible`, `hidden`, `scroll`, and `auto`. The `visible` value will display the overflow content, the `hidden` value will hide the content, the `scroll` value will display a scrollbar when necessary, and the `auto` value will display the scrollbar only when necessary.

## Overflow Y

The `overflow-y` property specifies what to do with content that overflows an element's height. The values it can take are `visible`, `hidden`, `scroll`, and `auto`. The `visible` value will display the overflow content, the `hidden` value will hide the content, the `scroll` value will display a scrollbar when necessary, and the `auto` value will display the scrollbar only when necessary.\
\
\ <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/css-styles/size.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.