> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/css-styles/size.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.