flexbox布局中的滚动面板

Question

我正在尝试使用一些可能相当广泛的内容创建布局，但只有一部分页面（绿色区域）滚动。我有三列，最后一列垂直分成两个，底部需要能够滚动（这个内容通常是一个大约700px宽的表）。请参阅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

Answer 2

您需要使用滚动内容的包装器来解决这个问题，并将其置于绝对位置。

从width: 700px移除main并添加包装，此处使用mainwrapper

对于这个演示，我添加了一个设置为700px宽/高的内部内容，以便您了解它的行为

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

.first {
  background-color: #ee8;
}
.second {
  background-color: #e7e;
}
.third {
  background-color: #bc1;
}

.top {
  flex: 0 0 150px;
  background-color: #2cc;
}
.main {
  position: relative;
  flex: 1 1;
}
.main .mainwrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #4c9;
  overflow: auto;
  padding: 15px;
  box-sizing: border-box;
}

<div class="container">
  <div class="first">Fixed</div>
  <div class="second">Fixed</div>
  <div class="third">
    <div class="top">Text here should wrap</div>
    <div class="main">
      <div class="mainwrapper">
        <div style="width: 700px; height: 700px">
          Simulating big content (700px wide, 700px high)
        </div>
      </div>
    </div>
  </div>
</div>