Flexbox children overshooting the width of the parent

Question

I need to create a simple page layout with a fixed size sidebar and a variable number of columns in the main content area.

I used flexbox to do this. For the most part it works well, except when the window is shrunk to a very small width (say 300px). In this case the column content overpowers the flex settings and the columns take on the necessary width to fit the content. The columns no longer fit the window. I don't want this behavior. The columns should continue to fit in the window and evenly sized. I even tried setting overflow-wrap: break-word to allow breaking of words, but that did not help. What's the correct way to do this? My code is shown below and also available in 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;
}