flex-grow 属性似乎无法正常工作[重复]答案

【问题标题】：The flex-grow property seems not work properly [duplicate]flex-grow 属性似乎无法正常工作[重复]
【发布时间】：2021-12-12 11:09:39
【问题描述】：

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

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>

【问题讨论】：

标签： javascript css flexbox

【解决方案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>

【讨论】：