如何在不同大小的容器中保持两个大小相同的 flexbox 元素？答案

【问题标题】：How can I keep two flexbox elements the same size within differently sized containers?如何在不同大小的容器中保持两个大小相同的 flexbox 元素？
【发布时间】：2019-05-06 08:55:56
【问题描述】：

如果没有视觉演示，这将相对难以解释，因此请参阅底部的 jsfiddle。

设置是两个列方向的 flexbox 容器，它们具有相对高度（即其父级的百分比）。两个容器都有一个固定的页眉和页脚。一个容器的高度总是另一个容器的两倍。较大的容器有两个孩子作为它的“内容”。较小的容器有一个子“内容”元素。

我希望较大容器的第一个内容元素始终与较小容器中的单个内容元素具有相同的高度，而不管容器的大小。对于任何给定的尺寸，我可以指定一个与元素匹配的 flex-grow，但它不适用于每种尺寸。

这可以使用 flexbox 吗？

<div id="card1" class="card">
  <div class="header"></div>
  <div class="content"></div>
  <div class="content2"></div>
  <div class="footer"></div>
</div>

<div id="card2" class="card">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>


html, body {height: 100%;}

body {
  display: flex;
}

#card1 {
  height: 80%;
  background-color: green;
}

#card2 {
  height: 40%;
  background-color: green;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 4px;
}

.header {
  width: 100%;
  height: 24px;
  background-color: lightgreen;
}

.content {
  width: 100%;
  background-color: lightseagreen;
  flex: 1;
}

.content2 {
  width: 100%;
  background-color: limegreen;
  flex: 1;
}

.footer {
  width: 100%;
  height: 24px;
  background-color: lightgreen;
}

JSFiddle

如果 flex 方向是 row 而我说的是宽度而不是高度，这个问题应该是一样的。

【问题讨论】：

只是想清楚一点：如果 card1 的高度总是 card2 的两倍，而内容块的高度总是相同的。你的代码看起来，这是否意味着 content2 块可以比 content 块稍高一些？
是的，我希望 content2 块能填满剩余的空间——我忘了提。
内容高度是响应式的还是固定的？比如card2或者1中的内容发生变化，是不是总是需要和另外一个的高度匹配？
好吧，默认情况下，内容高度是响应式的，因为它是使用 flexbox 在响应式容器内定位的……但是您可以假设比率始终与我想的相同。

标签： html css flexbox

【解决方案1】：

不知道你到底想要什么，但尽可能接近你所拥有的。首先，我们需要从 card1 内容容器中移除额外的高度（卡片的填充加上页脚）。通过这样做，您需要通过将margin-top: -44px 设置为content2 来“回馈”起点。我还将overflow: hidden 添加到内容容器中。

html, body {height: 100%;}

body {
  display: flex;
}

#card1 {
  height: 80%;
  background-color: green;
}

#card2 {
  height: 40%;
  background-color: green;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 5px;
}

.header {
  width: 100%;
  height: 24px;
  background-color: lightgreen;
}

.content {
  width: 100%;
  background-color: yellow;
  flex: 1;
  overflow: hidden;
}
.content > p{
  margin-top: 0
}
.content2 {
  padding-top: 44px;
  width: 100%;
  background-color: tomato;
  flex: 1;
}
.content2 > p{
  margin-top: -44px;
}

.footer {
  width: 100%;
  height: 24px;
  background-color: blue;
}

<div id="card1" class="card">
  <div class="header">Header</div>
  <div class="content">
    <p>
      ed ut perspiciatis ed ut perspiciatis one voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit ametvelit ed ut perspiciatis one voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit ametvelit
    </p>
  </div>
  <div class="content2">
    <p>Neque porro quisquam est</p>
  </div>
  <div class="footer">Footer</div>
</div>

<div id="card2" class="card">
  <div class="header">Header 2</div>
  <div class="content">
    <p>
      ed ut perspiciatis ed ut perspiciatis one voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit ametvelit ed ut perspiciatis rspiciatis ed ut perspiciatis one voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit ametvelit ed ut perspiciatis
    </p>
  </div>
  <div class="footer">Footer 2</div>
</div>

【讨论】：