Solución:
El código funciona como debería. El div padre solo estirará su ancho hasta el contenido dentro de él, es decir, el div hijo.
Y aquí ha definido el ancho del div secundario como 100px, por lo que el ancho del div principal también se expandirá solo hasta 100px, y el texto, que se desborda fuera del div secundario, no se considera contenido para el div principal.
Si desea que el padre se ajuste al contenido de los hijos, debe cambiar el ancho del div hijo a fit-content
como esto
.parent {
border: 1px solid red;
width: fit-content;
}
.children {
border: 1px solid green;
width: fit-content;
}<div class="parent">
<div class="children">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>Ok, entonces no estoy seguro de entender completamente lo que quiere hacer, pero podemos comenzar con esta respuesta. No sé cuánto sabes sobre CSS, así que no te ofendas con mi respuesta.
-
Primero, en HTML la mayoría de los elementos tienen, por defecto, dos tipos de renderizado (esto está realmente simplificado): nivel de bloque o en línea. Un elemento a nivel de bloque tomará el ancho de su padre. Un elemento en línea tomará el ancho de su contenido.
-
Entonces, si comprende ese principio, verá que tener el elemento padre tan amplio como sus hijos, que es tan amplio como su contenido, es bastante simple. He aquí un ejemplo:
.parent {
border: 1px solid red;
/* This will make the parent as wide as its content */
display: inline-block;
}
.children {
border: 1px solid green;
/* This is just so that we see if it's working */
max-width: 100px;
}<div class="parent">
<div class="children">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>Ahora, por supuesto que hay otras formas de hacerlo, pero esta es la solución más simple. La mejor solución dependerá de su contexto.