Question

我试图为未来的d3仪表板制作部分，明确的意图是不希望在页面两侧滚动，到目前为止，我有运作正常（see here）。我还希望红色条保持恒定的高度，并且绿色列在视口调整大小时保持恒定的宽度（目前它正在进行）。

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

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

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我玩了你当前的工作页面，这些变化似乎做了你以后的事情：

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

如何限制flexbox的增长？

1 个答案: