为什么弹性项目不会缩小内容大小？

Question

我有4个flexbox列，一切正常，但是当我向列中添加一些文本并将其设置为较大的字体大小时，由于flex属性，它使列比应该更宽。我尝试使用word-break: break-word并且它有所帮助，但是当我将列调整到非常小的宽度时，文本中的字母被分成多行（每行一个字母），但是列的宽度不比一个字母大小小。观看此视频 （一开始，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想总是尊重flex设置; flex size 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 {  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>