# Working with Size Fits

Size Fits form the basis of Codelessly's auto-layout system. It's a fundamental concept that helps you achieve that pixel-perfect responsiveness.

To summarize, Size Fits let you define how a node **fits** inside a frame, row, or column. Whether it takes up all the available space or wraps around its children, taking the minimum space possible. Or, you can even provide it a fixed size manually.

Size Fits can be defined per axis, **horizontal** and **vertical**. Simply select the desired Size Fit from the dropdown, or, use the *Size Fit Selector*.

<figure><img src="/files/wAAQ1jFLJ1fAwvOsWSAZ" alt=""><figcaption></figcaption></figure>

## Fixed Size

By default, nodes are **fixed in size**. This means that they do not adjust their size according to the parent layout.

So, if a node is fixed size on the horizontal axis, it retains its width.

<figure><img src="/files/Tslxx1rvVtQpeVUYFvVC" alt=""><figcaption></figcaption></figure>

If a node is fixed size on the vertical axis, it retains its height.

<figure><img src="/files/W9s4AIIwWbDSywwBj8pA" alt=""><figcaption></figcaption></figure>

## Fill Parent

This fit expands the node to the size of its direct parent.

So, if a node is set to fill parent on the horizontal axis, it expands its width to that of its parent.

<figure><img src="/files/0tf7mPBwEogowXTn59G0" alt=""><figcaption></figcaption></figure>

If a node is set to fill parent on the vertical axis, it expands its height to that of its parent.

<figure><img src="/files/OTa93tONUcIXJNinieb4" alt=""><figcaption></figcaption></figure>

## Wrap Content

Contrary to ***fill parent***, this fit depends on a node's children rather than its parent. If a node has children, ***wrap content*** sets the node's dimensions to that of its children.

So, if a node wraps content horizontally, its width shrinks to that of its children.

<figure><img src="/files/ru2NiNDYNk6qQgmC0KsB" alt=""><figcaption></figcaption></figure>

If a node wraps content vertically, its height shrinks to that of its children.

<figure><img src="/files/8XDemNtUEOrrKsNqtXDg" alt=""><figcaption></figcaption></figure>


---

# 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.codelessly.com/editor-basics/working-with-size-fits.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.