flex-grow属性似乎不能正常工作

Question

父div下有一个父div和两个子div。根据我的理解，当我将第一个子元素的flex-grow设置为0时，该元素的宽度永远不会改变，但是当我向第二个子元素添加一些文本时，第一个子元素的宽度减小了。但是为什么呢?

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>

Answer 1

你是对的。如果flex-grow正在扩展，则阻止宽度改变． 但是如果它会变小它什么也不做。这就是flex-shrink的作用。在孩子身上试试flex-shrink。

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>