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

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>