¿Cómo hacer crecer un div con contenido?

En relación con html, ¿cómo puedo hacer que un contenedor div crezca con el contenido en lugar de definir manualmente el ancho y el alto?

No importa cuáles sean las dimensiones del logotipo, el contenedor no crece con él: (… ¿cómo arreglaría esto (o puede arreglarse)?

Si no define ancho y / o alto, el elemento div crece junto con su contenido. ¡A menos que su contenido esté establecido en absoluto! Si el contenido está configurado para flotar, debe configurarlo en el contenedor

overflow:hidden 

para dejarlo crecer!

El comportamiento predeterminado para divs es llenar todo el ancho disponible. Algunas formas de anular esto:

  • set display: inline-block (no apto para IE)
  • flotarlo (con el efecto secundario de, bueno, flotarlo)
  • establecer display: inline (pero eso casi nunca es lo que quieres)
  • position: absolute establecida position: absolute
  • codificar un ancho (sin ancho dynamic)

Como último recurso, considere javascript.

Usa la propiedad mágica css llamada “flex”, es realmente sorprendente

 yourDiv{ display:flex; } 

Solo asegúrese de que los niños no estén en posición: absoluto porque esto no funcionará con flexión.

¿Tienes código de muestra? Un div siempre será el ancho total de su contenedor ya que es un elemento de nivel de bloque .

Puede especificar min-width y min-height y DIV ajustará ancho / alto a medida que el contenido cambie (por supuesto, no debajo de min width / height).

Ejemplo de lápiz de código de trabajo

Las propiedades CSS más importantes del código (DIV es editable, así que simplemente escriba el texto y crecerá con él por ancho / alto):

  min-height: 200px; min-width: 100px;