为什么不弹性项目收缩过去的内容大小？
我有4个flexbox列，一切正常，但是当我添加一些文本到列，并将其设置为一个大的字体大小，这是由于flexbox设置，使列比应该是更广泛。
我试图使用word-break: break-word ，它帮助，但是，当我调整列的宽度非常小时，文本中的字母被分成多行（每行一个字母），但是列没有得到小于一个字母的宽度。
尝试观看这个video： http : //screencast-o-matic.com/watch/cDetln1tyT （在开始，第一列是最小的，但当我调整窗口，这是最宽的列。我只是想尊重柔性设置总是..弹性尺寸1：3：4：4）
我知道，设置字体大小和列填充到更小将有助于…但有没有其他解决scheme？
我不能使用overflow-x: hidden 。
JSFiddle： https ：//jsfiddle.net/78h8wv4o/3/
.container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { flex: 4; background: red }
<div class="container"> <div class="col col1">Lorem ipsum dolor</div> <div class="col col2">Lorem ipsum dolor</div> <div class="col col3">Lorem ipsum dolor</div> <div class="col col4">Lorem ipsum dolor</div> </div>
弹性项目的隐含最小尺寸
您正在碰撞弹性项目的最小尺寸algorithm 。
这是一个默认设置，可以防止Flex项目缩小超过其内容的大小（无论其他弹性因子如flex-shrink还是flex-basis ）。
默认值是…
-
min-width: auto -
min-height: auto
…分别为行方向和列方向的弹性项目。
您可以通过将Flex项目设置为以下来覆盖这些默认值：
-
min-width: 0 -
min-height: 0 -
overflow: hidden（或任何其他值，除了visible）
修订的演示
.container { display: flex; } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */ } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { flex: 4; background: red }
<div class="container"> <div class="col col1">Lorem ipsum dolor</div> <div class="col col2">Lorem ipsum dolor</div> <div class="col col3">Lorem ipsum dolor</div> <div class="col col4">Lorem ipsum dolor</div> </div>
