RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content below:

fit-content - CSS | MDN

/* Used in sizing properties */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

Description

This keyword is used with sizing properties such as width, height, block-size, inline-size, min-width, and max-width. When used on these properties, the calculated size refers to the element's content box.

When fit-content is set, the element grows or shrinks to fit its content, but stops expanding after the relevant dimension reaches the size limit of its container.

The fit-content size is calculated using the following formula:

min(max-content, max(min-content, stretch))

where, stretch matches the element's margin box to the width of its containing block. The keyword is essentially equivalent to fit-content(stretch).

You can enable animations to and from fit-content using the interpolate-size property and the calc-size() function.

Examples Sizing boxes with fit-content HTML

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>

CSS

.container {
  border: 2px solid #cccccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

Result Specifications Browser compatibility

Loadingâ¦