html - Flexbox 列子元素拉伸(stretch)页面而不是使用 overflow-y

Question

我的问题是讨论栏(红色和绿色)正在拉伸(stretch)页面，而不是拉伸(stretch)到 .content 的高度并保持这种状态。虽然我可以将讨论框的高度设置为固定高度，但我更愿意尝试充分利用用户的屏幕空间提供的任何内容，如果可以的话最好不要使用 JS hack。

我现在唯一的想法可能是绝对定位 html、正文和内容，但如果我能避免这样做那就太好了，因为它可能会在稍后回来咬我。

有没有人对此有任何建议？还是我应该下定决心绝对定位？

示例如下:http://codepen.io/anon/pen/eprYKo

我把标记保持得很好和简单，没有任何多余的东西，我的实际标记还有一些内容，但它的本质就在那里

HTML:

<div class="header">
  Header.
</div>

<div class="content">
  <div class="discussion">
    <h4>Discussion Title</h4>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>

  <div class="other-discussion">
    <h4>Discussion Title</h4>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>
</div>

CSS:

.header {
  height: 100px;
  background: blue;
}

.content {
  display: flex;
  flex-direction: row;
  padding-bottom: 100px;
}

.discussion, .other-discussion {
  background: red;
  width: calc(50% - 40px);
  margin: 20px;
}

.other-discussion {
  background: green;
}

.comments {
  overflow-y: auto;
  color: white;
}

.comment {
    padding: 20px;
  margin-bottom: 10px;
}

Answer 1

如果你执行 html, body { height: 100% } 这将使页面成为文档的高度。不确定这是否是您要找的东西，但这是一支更新的笔:

http://codepen.io/anon/pen/avGdpm