1
为什么弹性项目不能缩小到超过内容大小?
我有4个flexbox列,并且一切正常,但是当我向列中添加一些文本并将其设置为大字体时,由于flex属性,它使列变宽了。 我尝试使用word-break: break-word它并对其有所帮助,但是当我将列的大小调整为非常小的宽度时,文本中的字母会分成多行(每行一个字母),但是该列的宽度不会小于一个字母的大小。 观看此视频 (开始时,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终遵循flex设置; flex大小为1:3:4:4) 我知道,将字体大小和列填充设置为较小会有所帮助...但是还有其他解决方案吗? 我不能使用overflow-x: hidden。 JSFiddle .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 …