如何使用CSS确保两个div保持相同的高度？

Question

我正在开展一个项目，但遇到了一些问题。这是一个快速解释：

我有 3 个 div：“提要容器”(FC)、“提要帖子”(FP) 和“评论部分”(CS)。最后 2 个包含在第一个内。我的目标是让 FP 和 CS 彼此相邻，中间有一个小间隙，并且两者高度相同（以 FP 的高度作为最大高度）。我将链接我现在所在位置的屏幕截图页面屏幕截图。不要介意颜色，它们是为了让我更好地想象我的容器哈哈。所以从图像来看，我最高的div是CS。它基本上是一个 div，随着通过表单添加更多内容而拉伸。 FP div 是一个固定高度，由其内部图片的大小定义。我需要 CS 的最大高度等于 FP 的高度，并且任何需要添加但无法容纳的内容都应该可以通过 div 上的滚动条访问。

这是我的 3 个容器的 CSS：

.feed-container {
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

.feed-post {
    background-color: orange;
    min-width: 49%;
    margin-right: 1em;
}

.comments-section {
    background-color:mediumslateblue;
    min-width: 49%;
    max-width: 49%;
    overflow-y: auto;
}

我不确定要添加/删除什么才能使最后一个容器与第二个容器的高度相匹配。如果有人可以提供帮助，我很乐意倾听！

我尝试向 GPT 询问此事，他给了我很多东西让我尝试。我认为最相关的似乎是在 CS 中添加“max-height: 100%”以及“max-height: max-content;”对于FP。可悲的是，它没有解决我的问题。

.feed-container {
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

.feed-post {
    background-color: orange;
    min-width: 49%;
    margin-right: 1em;
    max-height: max-content;
}

.comments-section {
    background-color:mediumslateblue;
    min-width: 49%;
    max-width: 49%;
    overflow-y: auto;
    max-height: 100%;
}

Answer 1

您可以通过使用两种不同的 CSS 属性来解决此问题：FlexBox 或 Grids。

这里有一个例子：https://codepen.io/faridsilva/pen/wvVEwJJ

使用 Flexbox：

<section class="feed-container">
   <div class="feed-post">
      This is the feed post
   </div>
   <div class="comments-section">
      This is the comments section
   </div>
</section>

.feed-container {
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 2%;
}

.feed-post {
  background-color: orange;
  text-align: center;
  padding: 20px 0;
  flex-shrink: 1; // column can shrink at same speed
  width: 100%;
  max-width: 49%; // limit to maker room for 2 columns
}

.comments-section {
  background-color: mediumslateblue;
  overflow-y: auto;
  padding: 20px 0;
  text-align: center;
  flex-shrink: 1;// column can shrink at same speed
  width: 100%;
  max-width: 49%;// limit to maker room for 2 columns
}

使用 CSS 网格

<div class="container">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns at 50% each */
  gap: 20px; /* Adjust the gap size as needed */
  width: 100%;
}

.item {
  background-color: lightgrey; /* Example styling for items */
  padding: 20px;
  text-align: center;
}