[Ayuda]: ¿Como hago que un box crezca dependiendo del contenido que tenga.

[Miguelcarp14]

Estoy creando una mini red social, ya hice el guardado de las publicaciones, todo bien. pero ahora estoy creando el diseño que va a tener la publicacion cuando se tenga que mostrar el problema es que no se como hacer que la caja/box crezca dependiendo de los caracteres que el contenido tenga además si tiene alguna que otra imagen dicha publicación.

(La caja de publicación con un contenido no tan largo)


(La caja se puede ver que crecio ya que ahora tiene un contenido de mayor longitud)


(Esta es la mini-red social que estoy comenzando desde 0 por eso quisiera alguna ayudita ya que hace 1 mes arranque, con esto)

[engel lex]

depende de tu codigo y contenedor, un div debería hacerlo sin problema, pero si estableces height en el css no lo hará, en ese caso min-height hace el trabajo

[Miguelcarp14]

depende de tu codigo y contenedor, un div debería hacerlo sin problema, pero si estableces height en el css no lo hará, en ese caso min-height hace el trabajo

Hola, gracias por responder!  Quería saber si serías tan amable de mostrarme un ejemplo sobre como debería hacerlo compañero, gracias desde ya y perdon por contestar algo tarde.

[engel lex]

Hola, gracias por responder!  Quería saber si serías tan amable de mostrarme un ejemplo sobre como debería hacerlo compañero, gracias desde ya y perdon por contestar algo tarde.

depende de tu codigo y contenedor

[abelvaldez]

Aqui con este codigo podrias hacer que la altura minima sea de 20% por comentario y que pueda llegar a crecer hasta 40% de la pantalla, escondiendo todo el contenido que sobresalga.

Código [Seleccionar] Expandir

<style>
    .box-size {
         width: 50%;
          min-height: 20vh;
          min-height: 40vh;
          overflow: hidden;   
         height: auto;
     }
</style>

<div class="box-size">
   
   <span>Aqui es donde va el contenido entre mas grande mas grande sera el box</span>

</div>

[EFEX]

Con contenteditable deberia funcionar

Código (html4strict) [Seleccionar] Expandir


<div class="box-size" contenteditable="true">
</div>

[Miguelcarp14]

Aqui con este codigo podrias hacer que la altura minima sea de 20% por comentario y que pueda llegar a crecer hasta 40% de la pantalla, escondiendo todo el contenido que sobresalga.

Código [Seleccionar] Expandir

<style>
    .box-size {
         width: 50%;
          min-height: 20vh;
          min-height: 40vh;
          overflow: hidden;   
         height: auto;
     }
</style>

<div class="box-size">
   
   <span>Aqui es donde va el contenido entre mas grande mas grande sera el box</span>

</div>

La verdad nada loco, SOS UN GENIO! ME RE SIRVIO GRACIAS PAPA!!! Gracias a los demás también por sus comentarios!

[abelvaldez]

Me alegro se ve muy bien tu proyecto.
suerte.