Как решить проблему flex сетки вида sidebar content, когда содержимое content имеет запредельную ширину?

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.sidebar {
  min-width: 220px;
  height: 100%;
  background: red;
}

.content {
  flex: 1;
  background: blue;
  height: 100%;
}

.table {
width: 100%
overflow-x: auto;
overflow-y: hidden;
height: 300px;
background: lime;
}

.table-content {
 width: 3000px;
 height: 300px;
 background: lime;
}

<div class="wrapper">
  <div class="sidebar"></div>
  <div class="content">
    <div class="table">
      <div class="table-content"></div>
    </div>
  </div>
</div>