Tengo un div principal y dos div secundarios bajo el padre. Según tengo entendido, cuando configuro el crecimiento flexible del primer hijo en cero, el ancho de este elemento nunca cambia, pero cuando agrego algo de texto al segundo hijo, el ancho del primer hijo disminuye. ¿Pero por qué?
document.querySelector('#button').addEventListener('click', function() { document.querySelector('.child2').appendChild(document.createTextNode('This is text. ')); }) .parent { width: 400px; height: 400px; background-color: #ccc; display: flex; } .child1 { width: 100px; flex-grow: 0; background: red; } <button id="button">Add text</button> <div class="parent"> <div class="child1">fdsafa</div> <div class="child2"></div> </div>Tienes razón. flex-grow evita que el ancho cambie si se está expandiendo . Pero si se hace más pequeño no hace nada. Para eso está flex-shrink . Pruebe flex-shrink en el niño.
document.querySelector('#button').addEventListener('click', function() { document.querySelector('.child2').appendChild(document.createTextNode('This is text. ')); }) .parent { width: 400px; height: 400px; background-color: #ccc; display: flex; } .child1 { width: 100px; flex-shrink: 0; background: red; } <button id="button">Add text</button> <div class="parent"> <div class="child1">fdsafa</div> <div class="child2"></div> </div>