如何在Flexbox中的单独列中滚动内容？

Question

我正在尝试制作一个布局，其中页面的底部是固定大小的，而上半部分有独立滚动的列。但是我将height:100%; overflow-y: scroll声明放在元素及其父元素上，我似乎无法使列滚动，它们总是在底部div下面消失，实际上在没有滚动条激活的情况下离开页面：

html, body {
  height: 100%;
}
#wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
}
#main{
  flex:0.9;
  padding-top:2rem;
  overflow: hidden;
}
#bottom{
  background: #1f132d;
  height: 10rem;
  flex:0.1;
}
.scroll-col{
  overflow-y:scroll;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
  <div id="main">
    <div class="container" id="main">
      <div class="row">
        <div class="col-sm-4 scroll-col">
          <div style="background:#f00; height:500px"></div>
        </div>
        <div class="col-sm-4 scroll-col">
          <div style="background:#0f0; height:500px"></div>
        </div>
        <div class="col-sm-4 scroll-col">
          <div style="background:#00f; height:500px"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="bottom"></div>
</div>

Answer 1

您需要重置溢出，弯曲方向和弯曲几次。

flex:0.9和flex:0.1;应写成flex:9;和flex:1;，对于2个孩子，比例相同，分别为90％和10％。但是，如果您在10rem上设置#bottom，那么flex:1;上的#main足以告诉您填补剩余空间。

＆＃13;

＆＃13;

html,
body,
#wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#main {
  padding-top: 2rem;
  flex: 1;
  overflow: hidden;
}
#bottom {
  background: #1f132d;
  height: 3rem;/* for snippet demo*/
}
.container,
.row {
  overflow: hidden;
  /*height: 100%;  used h-100 class instead*/
}
.scroll-col {
  overflow: auto;
  /*height: 100%;  used h-100 class instead*/
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
  <div id="main">
    <div class="container d-flex flex-column h-100" id="main">
      <div class="row h-100">
        <div class="col-sm-4 scroll-col h-100">
          <div style="background:#f00; height:500px"></div>
        </div>
        <div class="col-sm-4 scroll-col h-100">
          <div style="background:#0f0; height:1500px"></div>
        </div>
        <div class="col-sm-4 scroll-col h-100">
          <div style="background:#00f; height:250px"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="bottom"></div>
</div>

＆＃13;

＆＃13;

＆＃13; https://codepen.io/gc-nomade/pen/VMNVNP