1

Estoy realizando mi primera página web con FlexBox y tengo un problema al agregar texto a uno de los bloques. Este texto no se contrae, dejando el objeto totalmente sin contracción, como si anulara la función. Si le quito el texto, el bloque recupera la elasticidad. No sé cómo explicarlo, por ello compartiré imágenes y el código lo más ordenado posible: Comparto vídeo corto: https://youtu.be/BUZgra1mQ-E

div#cuerpo {
  position: relative;
  border: 1px solid black;
  margin: 10px 200px 10px 200px;
  min-width: 665px;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.hijo {
  position: relative;
  margin: 10px;
  border: 1px solid;
  min-width: 255px;
  max-width: 310px;
  height: 280px;
  flex-grow: 1;
}

.cuadro_gris {
  position: relative;
  min-width: 255px;
  max-width: 100%;
  height: 100px;
  top: 150px;
  background-color: rgba(0, 0, 0, .25);
}
<section id="contenido">

  <!-- DIV QUE PERMITE LA FLEXIBILIDAD DE LOS CUADRADOS HIJOS -->
  <div id="cuerpo">

    <!-- PRIMER CUADRADO CON FLEXIBILIDAD RESPECTIVA -->
    <div id="hijo1" class="hijo">

      <!-- FALLO DE TEXTO QUE QUITA LA FLEXIBILIDAD -->
      <div class="cuadro_gris">
        <div class="texto" style="border: 1px solid; ">
          <p>texto del libro textos sfsdfsd sfsdfsdf sdfsdfsdfsdf </p>
        </div>
      </div>
    </div>


    <!-- ESTO SON LOS OTROS CUADRADOS -->

    <div id="hijo2" class="hijo">
      <div class="cuadro_gris"></div>
    </div>
    <div id="hijo3" class="hijo">
      <div class="cuadro_gris"></div>
    </div>
    <div id="hijo4" class="hijo">
      <div class="cuadro_gris"></div>
    </div>
    <div id="hijo5" class="hijo">
      <div class="cuadro_gris"></div>
    </div>
  </div>
</section>

Imágenesintroducir la descripción de la imagen aquí: introducir la descripción de la imagen aquí

Como podéis ver, las cajas se contraen sin problemas, pero al ponerle el texto este evita que la primera caja se contraiga, y no encuentro el error. Desde ya muchas gracias por cualquier ayuda. Un saludo cordial.

7
  • Yo no he entendido el problema que planteas. Tampoco está clara la pregunta, no sé si buscas corregir algo o que simplemente te expliquen porque pasa
    – Yussef
    Commented el 29 nov. a las 14:26
  • Quisiera saber por qué pasa esto, ya que no comprendo porque el texto no se comprime. Es difícil de explicar sin un vídeo. Yo encojo la pantalla y quiero que se adapte hasta cierto punto, por ello uso el flexbox, pero como se ven en las imágenes si quito el texto hace bien el trabajo, comprime hasta un cierto punto. Sin embargo, al poner un texto esa compresión desaparece, haciendo que ese cuadrado quede del tamaño predeterminado y los demás se compriman.
    – Lord_Po
    Commented el 29 nov. a las 14:42
  • Hay algún problema por el que no puedas adjuntar un link a un video del problema? Yo también he usado gifs, para demostrar cual es el problema.
    – Excorpion
    Commented el 29 nov. a las 15:02
  • Vale, soy nuevo aquí y no sabía si podía subir un enlace corto con un vídeo. En un momento lo hago y lo pongo. Mil gracias.
    – Lord_Po
    Commented el 29 nov. a las 15:07
  • 1
    Porque el texto que tienes está en una sola línea, por lo que busca colocarse enteramente a lo ancho hasta el máximo que le es posible. Tú le estas diciendo que puede expandirse hasta un máximo de 310px, entonces el texto lo hace.
    – Yussef
    Commented el 29 nov. a las 15:09

1 respuesta 1

1

Tienes cajas que pueden tener un ancho

  • máximo de 255px
  • mínimo de 310px

Además, tienes una línea de texto "larga", digamos que mide unos 500px de ancho. Este texto buscará caber enteramente, pero no lo hace, dado que está restringido con el máximo ancho posible (310px), y se quedará para siempre con ese ancho máximo

Luego tus otras cajas, que están vacías, en teoría medirán el mínimo posible (255px), pero dado que tienes flex-grow: 1; asignado para todas las cajas, estas diciendo que el espacio sobrante lo distribuya uniformemente. Y como tu primera caja ya tiene el máximo posible esta distribución la aplica solo a las cajas restantes, sumándoles más anchura a cada una de ellas (con la restricción del máximo de 310px).

Entonces no hay nada de extraño en lo presentas, todas las reglas que has puesto se cumplen.

Intuyo que tu estas buscando algo como:

.hijo{
  width: min-content;
}

Esto cambiará el modo en que se calcula los anchos disponibles. Si esta regla se la aplicas al elemento que tiene el texto (<p>) el elemento será tan ancho como la palabra más larga. En cambio, al no aplicarlo directamente, sino que lo haces a un elemento padre, lo que hará es recortar los espacios sobrantes y dará el efecto de "elasticidad" que creo estas buscando

1
  • Muchísimas gracias, es exactamente lo que buscaba, la opción última, que el texto se reduzca (realice un wrap) a la par que la caja. Lo aplicaré y lo estudiaré.
    – Lord_Po
    Commented el 29 nov. a las 17:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.