Field Sizing

Controls the sizing of elements that have a default preferred size.

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome

Edge

Firefox

Safari

Class	Style
`fs-f`	`field-sizing: fixed;`
`fs-c`	`field-sizing: content;`

Fixed

Initial value

Allows the field to size itself based on the content, adjusting its size dynamically to fit the content inside.

Write a message:

<div class="d-f fd-c">
  <label class="mb-2 tc-black fw-600">Write a message:</label>
  <textarea class="b-1 fs-f max-h-50 max-w-100 r-none" placeholder="Hello, my name is..."></textarea>
</div>

Content

Ensures that the field maintains a fixed size, regardless of the content within it.

Write a message:

<div class="d-f fd-c">
  <label class="mb-2 tc-black fw-600">Write a message:</label>
  <textarea class="b-1 fs-c max-h-50 max-w-100 r-none" placeholder="Hello, my name is..."></textarea>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

You can combine responsive breakpoints like sm:fs-*, md:fs-*, lg:fs-*, and xxl:fs-* to allow targeting specific utilities in different viewports.

Targeting hover states

Alternatively, you can apply :hover by using h:fs-* utility to override elements and change their values when hovering over them.