Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La función CSS fit-content() ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: min(maximum size, max(minimum size, argument)).

/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> value */
fit-content(40%)

La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por max-content y el mínimo por auto, el cual es calculado por "auto" (ej. minmax(auto, max-content)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

También puede usarse como tamaño de caja disponible para width, height, min-width, min-height, max-width y max-height, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

Sintaxis

Función que acepta un  <length> o un <percentage> como un argumento.

Values

<length>
Una Longitud Absoluta.
<percentage>
Un porcentaje relativo al espacio disponible en los ejes dados.
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

Formal syntax

fit-content( [ <length> | <percentage> ] )

Ejemplo

CSS

#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item con más texto en él. Porque el contenido que es
    mas grande que el ancho máximo, está restringido a los
    300 pixeles.
  </div>
  <div>Flexible item</div>
</div>

Result

Especificaciones

Especificación Estado Comentario
CSS Intrinsic & Extrinsic Sizing Module Level 3
La definición de 'fit-content()' en esta especificación.
Working Draft Define la función como el tamaño de caja disponible para width, height, min-width, min-height, max-width y max-height.
CSS Grid Layout
La definición de 'fit-content()' en esta especificación.
Candidate Recommendation Define la función cuando es usada como un tamaño de track.

Browser compatibility

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 29Edge Soporte completo 16Firefox Soporte completo 51IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 10.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Edge Mobile Soporte completo 16Firefox Android Soporte completo 51Opera Android Soporte completo 44Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 7.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: ocamachor
Última actualización por: ocamachor,