CSS Flex - 当重新调整包装弹性项目的大小时，会改变它的宽度尺寸

Question

我正在使用 CSS Flex 来在包装器中显示三个相应的 DIV。 第一个 DIV (item0) 的宽度尺寸为 50px。

我需要更改 wrapper 的高度，并在包装​​器内保持 item0 和 item1 DIV 的原始宽度。

我目前的问题是：

• 重新调整wrapper 的大小时，flex (item0) 的项目会得到不同的width。尺寸

请点击示例中的两个按钮查看尺寸变化。

我想知道：

• 为什么宽度大小会改变？
• 如何保持 item0 和 item2 的宽度大小与我原来的 CSS 设置相同？

注意事项：

我了解滚动条似乎占用空间。我怎样才能将item0 和item2 保持在固定宽度，而item1 拉伸以填充剩余空间？ （我尝试使用%，但无法获得想要的结果）。

var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');

btn0.addEventListener('click', function(event) {
  wrapper.style.height = '25px';
  result.value = item0.getBoundingClientRect().width;
});

btn1.addEventListener('click', function(event) {
  wrapper.style.height = '350px';
  result.value = item0.getBoundingClientRect().width;
});

#wrapper {
  width: 250px;
  height: 350px;
  background-color: gray;
  overflow: auto;
}

#flex-container {
  display: flex;
}

#item0 {
  width: 50px;
  background-color: red;
  height: 150px;
}

#item1 {
  width: 150px;
  background-color: orange;
  height: 150px;
}

#item2 {
  width: 50px;
  background-color: pink;
  height: 150px;
}

<div id="wrapper">
  <div id="flex-container">
    <div id="item0" class="item">a
    </div>
    <div id="item1" class="item">b
    </div>
    <div id="item2" class="item">c
    </div>
  </div>
</div>

<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

Answer 1

使用flex: 0 0 50px 作为 item0 样式。

见jsfiddle

它告诉 flexbox 布局不要增长也不要收缩，并给它一个 50px 的宽度。

对 flexbox 项目使用 flex: 属性总是好的，因为它的默认值可能因浏览器而异。 （实际上你的问题不会发生在例如Firefox）

Answer 2

当容器宽度减小时，所有子元素也按比例缩小。

将flex: 0 0 auto; 添加到 item0 和 item2。当空间不足时，它不允许元素收缩到最小。

var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');

btn0.addEventListener('click', function(event) {
  wrapper.style.height = '25px';
  result.value = item0.getBoundingClientRect().width;
});

btn1.addEventListener('click', function(event) {
  wrapper.style.height = '350px';
  result.value = item0.getBoundingClientRect().width;
});

#wrapper {
  width: 250px;
  height: 350px;
  background-color: gray;
  overflow: auto;
}

#flex-container {
  display: flex;
}

#item0 {
  flex: 0 0 auto;
  width: 50px;
  background-color: red;
  height: 150px;
}

#item1 {
  width: 150px;
  background-color: orange;
  height: 150px;
}

#item2 {
  flex: 0 0 auto;
  width: 50px;
  background-color: pink;
  height: 150px;
}

<div id="wrapper">
  <div id="flex-container">
    <div id="item0" class="item">a
    </div>
    <div id="item1" class="item">b
    </div>
    <div id="item2" class="item">c
    </div>
  </div>
</div>

<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">