I am working with a parent div and two children divs underneath it. I noticed that when I set the flex-grow property of the first child to zero, its width remains constant. However, if I add text to the second child, the width of the first child decreases. This behavior is intriguing to me and I want to understand why this happens.
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>