如何用CSS使feed-post与comments-section等高，超量内容滚动

要实现feed-post（FP）与comments-section（CS）等高并排、CS内容超出时滚动的效果，需要调整flex容器的高度控制逻辑，同时优化CS内部的布局结构，以下是具体调整方案：

修改后的CSS代码 #

.feed-container {
    background-color: pink;
    display: flex;
    gap: 1em; /* 用gap统一控制子项间距，替代margin-right更规范 */
    align-items: flex-start; /* 阻止子项默认拉伸，容器高度由FP（含固定高度图片）决定 */
}

.feed-post {
    background-color: orange;
    flex: 1; /* 自动平分容器宽度，替代固定百分比更适配响应式 */
}

.comments-section {
    background-color: mediumslateblue;
    flex: 1; /* 和FP平分容器宽度 */
    display: flex;
    flex-direction: column; /* 内部垂直布局，分离表单与评论区 */
    height: 100%; /* 继承容器高度，与FP保持一致 */
}

.comment-form {
    background-color: wheat;
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* 控制文本域与按钮的间距 */
    margin-bottom: 1em; /* 与评论区拉开视觉距离 */
}

.comment-list { /* 新增容器包裹所有comment-box，专门控制滚动 */
    overflow-y: auto;
    flex: 1; /* 占据CS剩余高度 */
}

.comment-box {
    background-color: aquamarine;
    margin-bottom: 20px;
}

关键调整说明 #

1. feed-container 调整

   • 用gap:1em替代FP的margin-right，统一管理两个子项的间距，符合flex布局的设计逻辑
   • 添加align-items:flex-start：默认flex子项会自动拉伸撑满容器高度，设置后容器高度会由内容最高的FP（内部图片固定高度）决定，CS将自动匹配这个高度

2. 子项宽度控制

   • 用flex:1替代固定的min-width/max-width:49%，让FP和CS自动平分容器可用宽度，在不同屏幕尺寸下更适配

3. comments-section 内部布局优化

   • 添加flex-direction:column，将表单和评论区拆分为垂直上下结构
   • 新增.comment-list容器包裹所有评论：给这个容器设置overflow-y:auto和flex:1，确保表单固定在CS顶部，评论区占据剩余高度，内容超出时自动出现滚动条

配套HTML结构调整 #

需要把所有comment-box放到新增的.comment-list容器中，示例结构：

<div class="feed-container">
  <div class="feed-post">
    <!-- 内部含固定高度图片的内容 -->
  </div>
  <div class="comments-section">
    <div class="comment-form">
      <textarea placeholder="写下你的评论"></textarea>
      <button>提交评论</button>
    </div>
    <div class="comment-list">
      <div class="comment-box">评论内容1</div>
      <div class="comment-box">评论内容2</div>
      <!-- 新增评论会插入到这里 -->
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Mégane d'Argent