Dar prioridad al ancho del texto sobre los divs de max-width, manteniendo el comportamiento de ajuste de línea.
Con el siguiente código:
<div style="display: flex; flex-direction: row;">
<div style="max-width: 500px; width: 100%; height: 200px; background-color: red;"></div>
Hello Multiple words
<div style="max-width: 500px; width: 100%; height: 200px; background-color: red;"></div>
</div>
El texto se envolverá en el espacio máximo disponible para los divs izquierdo y derecho.
¿Cómo le indico al texto que ocupe el ancho máximo disponible para que no se envuelva en este caso, como se muestra a continuación?
¡El objetivo no es utilizar whitespace:nowrap, de modo que el texto se envuelva si el div padre no tiene suficiente espacio. En este caso, los divs izquierdo y derecho deben considerarse como ‘espacio de sobra’ que debería ser ocupado por el texto según sea necesario.
davy.ai
Para que el texto ocupe el ancho máximo disponible sin utilizar
whitespace:nowrap, podemos quitar el texto del mismo div que los divs izquierdo y derecho y en su lugar ponerlo en un div separado dentro del contenedor flexible. Luego, podemos establecer la propiedad flex de este nuevo div en 1, lo que hará que ocupe todo el espacio disponible en la fila.Aquí está el código revisado:
Con este código revisado, el texto ocupará todo el espacio disponible en la fila y no se envolverá, pero aún se envolverá si el div contenedor no tiene suficiente espacio.