如何滚动上下文flex div

Question

我有一个简单的Header站点布局和一个3列主要部分。中间列应该包含一个冗长的内容，所以我希望它滚动，我无法实现它。 这是问题的原型： http://codepen.io/ValYouW/pen/GZxKBa

更新：很抱歉没有提及，但我的意思是水平滚动，而不是垂直...

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
}

#layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 4px solid red;
}

#header {
  border: 2px solid yellow;
}

#main {
  border: 2px solid green;
  display: flex;
  flex: 1;
  flex-direction: row;
}

#facets{
  border: 2px solid pink;
  display: flex;
  width: 100px;
}

#report {
  border: 2px solid pink;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#rightside {
  border: 2px solid pink;
  display: flex;
  width: 100px;
}

#chips {
  border: 2px solid orange;
}

#leads-grid {
  border: 4px solid orange;
  display: flex;
  flex: 1;
  overflow: auto;
}

#grid1 {
  border: 2px solid black;
  width: 1000px;
}

＆＃13;

<div id="layout">
  <div id="header">Header</div>
  <div id="main">
    <div id="facets">Facets</div>
    <div id="report">
      <div id="chips">Chips</div>
      <div id="leads-grid">
        <div id="grid1">How to make my parent (#leads-grid) scroll?</div>
      </div>
    </div>
    <div id="rightside">Right side</div>
  </div>
  <div>

＆＃13;

＆＃13;

＆＃13;

如何让＃leads-grid滚动？ THX。

Answer 1

对于lead-grid有滚动他的儿子（grid1）需要超越内容。尝试将很多br放入grid1的内容中，lead-grid将创建一个滚动。

Answer 2

您的＃leads-grid 已经滚动了。 您只需要向＃leads-grid 添加更多内容。

见下面的代码。我已将 height：5000px 添加到＃grid1 作为内联样式。滚动出现。

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
}

#layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 4px solid red;
}

#header {
  border: 2px solid yellow;
}

#main {
  border: 2px solid green;
  display: flex;
  flex: 1;
  flex-direction: row;
}

#facets {
  border: 2px solid pink;
  display: flex;
  width: 100px;
}

#report {
  border: 2px solid pink;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#rightside {
  border: 2px solid pink;
  display: flex;
  width: 100px;
}

#chips {
  border: 2px solid orange;
}

#leads-grid {
  border: 4px solid orange;
  display: flex;
  flex: 1;
  overflow: auto;
}

#grid1 {
  border: 2px solid black;
  width: 1000px;
}

<div id="layout">
  <div id="header">Header</div>
  <div id="main">
    <div id="facets">Facets</div>
    <div id="report">
      <div id="chips">Chips</div>
      <div id="leads-grid">
        <div id="grid1" style="height: 5000px;">How to make my parent (#leads-grid) scroll?</div>
      </div>
    </div>
    <div id="rightside">Right side</div>
  </div>
  <div>