为什么弹性项目不能缩小到超过内容大小？

我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。

我尝试使用word-break: break-word它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，仍然将文本中的字母分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。

观看此视频（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）

我知道，将字体大小和列填充设置为较小会有所帮助……但是还有其他解决方案吗？

我不能使用overflow-x: hidden。

.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>