Flexbox儿童超过父母的宽度

Question

我需要在主要内容区域中创建一个简单的页面布局，其中包含固定大小的侧边栏和可变数量的列。

我使用flexbox来做到这一点。在大多数情况下它运行良好，除非窗口缩小到非常小的宽度（比如300px）。在这种情况下，列内容会超出弹性设置，列会采用必要的宽度来适应内容。列不再适合窗口。我不想要这种行为。柱子应该继续适合窗户并且尺寸均匀。我甚至尝试设置overflow-wrap: break-word以允许断言，但这没有帮助。这样做的正确方法是什么？我的代码如下所示，也可在this codepen中找到。

HTML

<div class="page">
  <div class="sidenav">Side Nav</div>
  <div class="content">
    <div class="row">
      <div class="column">Column 0 SomeLongUnbreakableText</div>
      <div class="column">Column 1</div>
      <div class="column">Column 2 SomeLongUnbreakableText</div>
    </div>
  </div>
</div>    

CSS

.page {
  display: flex;
  flex-direction: row;
}

.sidenav {
  flex: 0 0 200px;
  background-color: #EEE;
}

.content {
  flex: 1;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1;
  margin: 0 1px;
  background-color: #FEA900;
  overflow-wrap: break-word;
}