使子 div 用滚动填充父 div

Question

我在使用 flexbox 布局作为子控件的父级时遇到问题。

html, body, .frame{
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
.frame{
  display: flex;
  flex-flow: column;
}
.header{
  background-color: yellow;
  height: 40px;
}
.body-outer{
  background-color: green;
  flex: 1;
  display: flex;
  flex-flow: column;
}
.body-inner{
  border: 1px solid red;
  flex: 1;
}
.big-text{
  height: 2000px;
  border: 1px solid lightblue;
  overflow: auto;
  margin: 5px;
}

  <div class="frame">
    <div class="header">header</div>
    <div class="body-outer">
      <div>subheader</div>
      <div class="body-inner>">
        <div class="big-text">big text</div>
      </div>  
    </div>
  </div>

'body-inner' div 旨在用 flex: 1 填充剩余空间，'big-text' 应该填充 'body-inner' 的整个空间而不展开它但显示滚动条。

Answer 1

您已将overflow 应用于内容。它应该应用于将要溢出的容器。

另外，您需要一个固定的高度，这样overflow 属性就会溢出。

试试这个：

.frame {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

.header {
  background-color: yellow;
  height: 40px;
}

.body-outer {
  height: calc(100vh - 40px); /* new */
  background-color: green;
  /* flex: 1; */
  display: flex;
  flex-flow: column;
}

.body-inner {
  border: 1px solid red;
  flex: 1;
  overflow: auto; /* moved here */
}

.big-text {
  height: 2000px;
  border: 1px solid lightblue;
  /* overflow: auto; */
  margin: 5px;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="frame">
  <div class="header">header</div>
  <div class="body-outer">
    <div>subheader</div>
    <div class="body-inner">
      <div class="big-text">big text</div>
    </div>
  </div>
</div>