Html Flexbox列子项拉伸页面，而不是利用overflow-y

我的问题是讨论栏（红色和绿色）正在将页面向外延伸，而不是延伸到.content的高度并保持这种方式。虽然我可以将讨论框的高度设置为固定高度，但我更愿意尝试充分利用用户的屏幕空间，如果可以的话，最好不用JS黑客

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

有人对此有什么建议吗？还是我应该把自己定位在一个绝对的位置

以下是示例：

我一直保持那里的标记很好，很简单，没有任何绒毛，我的实际标记有更多的东西，但它的本质就在那里

HTML:

---

如果使用

html，body{height:100%}

将使页面成为文档的高度。不确定这是否是您要找的，但这是一支更新过的钢笔：

@woestijnrog发布了代码笔，解决了我遇到的问题

HTML

---

您好，如果您能提供您的代码或链接，这将有助于某人回答您的问题是的，我忘了在末尾添加它。溢出仅在元素高度/宽度受限时生效。这似乎不是设定在这里的，这就是我害怕的。在我的实际实现中，我有一些关于comments div的东西，所以我不能只做height:100%，因为上面的东西在高度上也可以是可变的。你需要提供更多的信息。您希望注释在某个点开始滚动，那么它们的高度是如何限制的呢？使用（嵌套？）FlexBox，您想要的似乎足够简单，但您在描述中遗漏了必要的细节。

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

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

<div id='wrapper'>
<div class="header">
  Header.
</div>

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

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

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

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

#wrapper {
        border: 1px solid black;
        height: 85vh;
        display: flex;
        flex-direction: column;
        padding-bottom: 50px;
    }
    .header {
        height: 100px;
        background: blue;
        margin: 20px;
    }
    h4 {
    }
    .content {
        flex: 1;
        display: flex;
        flex-basis: 45%;
        justify-content: space-around;
      overflow: hidden;
    }
    .stuff {
        background: #ccc;
    }
    .discussion .stuff {
        flex: 0 0 60px;
    }
    .other-discussion .stuff {
        flex: 0 0 150px;
    }
    .discussion, .other-discussion {
        background: red;
        width: calc(50% - 40px);
        display: flex;
        flex-direction: column;
    }
    .other-discussion {
        background: green;
    }
    .comments {
        color: white;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    .comment {
        margin: 25px;
    }