如何限制 flexbox 的增长？

Question

我正在尝试为未来的 d3 仪表板设计部分，明确的意图是不希望页面两侧有任何滚动，到目前为止我的功能正常(see here)。我还希望红色条保持恒定的高度，绿色列在视口调整大小时保持恒定的宽度（目前是这样）。

我还希望每个彩色框在填充内容（表格数据行）时在内部滚动，以免影响整个界面的大小。但是当我向新闻提要 div 添加元素时，例如，在右侧，它会增长以适应它们（不是我想要的）。这是一个 runnable gist 显示问题。

而不是 <p> 标签的示例堆栈修改 整个 父 div <div id="under-splash-banner"> 的高度（注意其他蓝色框如何全部拉伸）并创建一个垂直滚动条沿着右侧的 整个 高度，我希望绿色新闻提要 div 在内部滚动以显示其所有内容，而不是超出其默认的空大小（从而迫使整个窗口滚动） .

这是否与我没有为其或其父级指定最大高度这一事实有关？如果是这样，我将如何做到这一点并保持布局的响应性？

@import 'https://fonts.googleapis.com/css?family=Roboto';
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

/* line 4, D:/Webstorm Projects/EDIS/css/style.sass */

html {
  box-sizing: border-box;
}
/* line 7, D:/Webstorm Projects/EDIS/css/style.sass */

*,
*::before,
*::after {
  box-sizing: inherit;
}
/* line 10, D:/Webstorm Projects/EDIS/css/style.sass */

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
  font-family: 'Roboto', 'Open Sans', sans-serif;
}
/* line 17, D:/Webstorm Projects/EDIS/css/style.sass */

.place-holder {
  display: flex;
  font-size: 18pt;
  justify-content: center;
  align-items: center;
}
/* line 23, D:/Webstorm Projects/EDIS/css/style.sass */

#splash-banner {
  height: 100px;
  background-color: rgba(255, 0, 0, 0.2);
}
/* line 27, D:/Webstorm Projects/EDIS/css/style.sass */

#under-splash-banner {
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
  width: 100vw;
}
/* line 33, D:/Webstorm Projects/EDIS/css/style.sass */

#news-feed {
  width: 400px;
  background-color: rgba(0, 255, 0, 0.2);
}
/* line 37, D:/Webstorm Projects/EDIS/css/style.sass */

#resizable-panels {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* line 42, D:/Webstorm Projects/EDIS/css/style.sass */

#patient-info {
  display: flex;
  flex: 1;
}
/* line 46, D:/Webstorm Projects/EDIS/css/style.sass */

#order-history {
  flex: 1;
  background-color: rgba(0, 0, 255, 0.1);
}
/* line 50, D:/Webstorm Projects/EDIS/css/style.sass */

#health-status {
  flex: 1;
  background-color: rgba(0, 0, 255, 0.2);
}
/* line 54, D:/Webstorm Projects/EDIS/css/style.sass */

#to-do {
  flex: 1;
  background-color: rgba(0, 0, 255, 0.3);
}
/* line 58, D:/Webstorm Projects/EDIS/css/style.sass */

#timeline {
  display: flex;
  flex: 1;
}
/* line 63, D:/Webstorm Projects/EDIS/css/style.sass */

#timeline-svg {
  flex: 1;
  border: 1px solid gray;
}

<div id="under-splash-banner">
  <div class="place-holder" id="news-feed">News Feed</div>
  <div id="resizable-panels">
    <div id="patient-info">
      <div class="place-holder" id="order-history">Order History</div>
      <div class="place-holder" id="health-status">Health Status</div>
      <div class="place-holder" id="to-do">To Do</div>
    </div>
    <div id="timeline" style="background: lightgray;">
    </div>
  </div>
</div>

Answer 1

我玩弄了您当前的工作页面，这些更改似乎符合您的要求：

#news-feed {
  display: block;
  overflow: auto;
}