假设我有一个只有两个子元素的弹性容器，我想允许他们缩小，所以我给这两个子元素一个非零值flex-shrink.据我所知，重要的是价值观之间的比例.因此，将这些值设置为:
- 第一个子元素4，第二个子元素1
- 第一个子元素100，第二个子元素25
- 第一个子元素1，第二个子元素0.25
都应该产生相同的行为.确实是这样的.直到其中一个子元素达到min-width岁.在第三种情况下，第二个子级溢出出容器.我会说这是一个漏洞，但在Chrome、Safari和Firefox上都是一致的.
这是一个playground，这是一个屏幕截图，显示了"虫子"，其中我添加了每个子元素的衡量标准.每个子width属性设置为200px和min-width到playgroundpx.容器的宽度在第一种情况下为300px，在第二种情况下为220px.
body {
background: black;
color: white;
}
.container {
border: deeppink 2px solid;
display: flex;
height: 50px;
}
.box {
width: 200px;
min-width: 100px;
}
.green {
background: green;
}
.blue {
background: blue;
}<h2>First case, both boxes have pixels to give up</h2>
<h3>Flex shrink 4 and 1</h3>
<div class="container" style="width: 300px;">
<div class="green box" style="flex-shrink: 4;"></div>
<div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>Flex shrink 100 and 25</h3>
<div class="container" style="width: 300px;">
<div class="green box" style="flex-shrink: 100;"></div>
<div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>Flex shrink 1 and 0.25</h3>
<div class="container" style="width: 300px;">
<div class="green box" style="flex-shrink: 1;"></div>
<div class="blue box" style="flex-shrink: 0.25;"></div>
</div>
<h2>Second case, first box is at its minimun</h2>
<h3>Flex shrink 4 and 1</h3>
<div class="container" style="width: 220px;">
<div class="green box" style="flex-shrink: 4;"></div>
<div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>Flex shrink 100 and 25</h3>
<div class="container" style="width: 220px;">
<div class="green box" style="flex-shrink: 100;"></div>
<div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>Flex shrink 1 and 0.25: overflow!</h3>
<div class="container" style="width: 220px;">
<div class="green box" style="flex-shrink: 1;"></div>
<div class="blue box" style="flex-shrink: 0.25;"></div>
</div>有人能解释一下这是怎么回事吗？
