css - flexbox 布局中的滚动面板

Question

我正在尝试创建一个布局，其中包含一些可能相当宽的内容，但只有页面的一部分(绿色区域)滚动。我有三列，最后一列垂直分成两列，底部需要能够滚动(其内容通常是大约 700 像素宽的表格)。见https://codepen.io/simonh1000/pen/RVgOMo和下面的代码

如您所见，第三列的顶部没有在我想要的时候换行，而底部没有显示滚动条以容纳特意加宽的内容。 这就是我需要帮助的地方

body {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-size: 28px;
  padding: 0;
}
  .first, .second {
    padding: 15px;
    flex: 0 0 150px;    
  }
  .third {
    flex: 1 1;
    display: flex;
    flex-direction: column;
  }

.first {
  background-color: #ee6;
}
.second {
  background-color: #c66;
}
.top {
  flex: 0 0 150px;
  background-color: #27c;
  
}
.main {
  flex: 1 1;
  width: 700px;
  background-color: #4c9;
  overflow: auto;
  padding: 15px;
}

<div class="container">
  <div class="first">Fixed</div>
  <div class="second">Fixed</div>
  <div class="third">
    <div class="top">Text here should wrap but does not</div>
    <div class="main">
      This section should scroll so that it can accommodate content that is rather wider than the space left on the screen.
    </div>
  </div>
</div>

Answer 1

您已经为具有 main 类的元素设置了固定宽度。

.main {
  ...
  width: 700px; /* this is the problem */
}

删除它，一切都会按预期工作。

Updated Codepen