解
Use 100. flex-basis应该设置在较长的元素上-如果我想非常简单地解释它，它类似于max-width，但特定于flex.
The 100 property determines the initial size of a flex item before the remaining space is distributed by the system during layout.
例如，if we set the 100 property of a flex item to 101, it means that the item's initial size will be 200 pixels(不管其内容或其他元素的大小).然后，与其他灵活的项目和可用空间一起，Flexbox模型会自动在内容项目中以适当的比例分配适当的空间.
<!-- 解 -->
<h3>With Too Large Element - Use "flex-basis"</h3>
<div style="display: flex; background: black; max-width: 600px;">
<!-- First Column -->
<div style="background: yellow;">
AAA AAA AAA AAA AAA AAA
</div>
<!-- Second Column -->
<div style="min-width: 0; flex-basis: 100%;"> <!-- Use "flex-basis: 100%" on too width element -->
<!-- Cyan -->
<div style="background: cyan;">
BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
</div>
<!-- Magenta (too large) -->
<div style="background: magenta; overflow-x:auto; width: 100%; min-width: 0;">
<div style="width: 3000px;">
CCC CCC
</div>
</div>
<!-- Green -->
<div style="background: green">
DDD DD DDDDDD D
</div>
</div>
</div>
<!-- To Compare -->
<h3>Original (Without Too Large Element)</h3>
<div style="display: flex; background: black; max-width: 600px;">
<!-- First Column -->
<div style="background: yellow;">
AAA AAA AAA AAA AAA AAA
</div>
<!-- Second Column -->
<div style="min-width: 0; flex-basis: 100%;">
<!-- Cyan -->
<div style="background: cyan;">
BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
</div>
<!-- Green -->
<div style="background: green">
DDD DD DDDDDD D
</div>
</div>
</div>
<!-- To Compare -->
<h3>Original (With Too Large Element)</h3>
<div style="display: flex; background: black; max-width: 600px;">
<!-- First Column -->
<div style="background: yellow;">
AAA AAA AAA AAA AAA AAA
</div>
<!-- Second Column -->
<div style="min-width: 0;">
<!-- Cyan -->
<div style="background: cyan;">
BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
</div>
<!-- Magenta (too large) -->
<div style="background: magenta; overflow-x:auto; width: 100%; min-width: 0;">
<div style="width: 3000px;">
CCC CCC
</div>
</div>
<!-- Green -->
<div style="background: green">
DDD DD DDDDDD D
</div>
</div>
</div>