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

Question

如果没有视觉演示，这将很难解释，因此请参阅底部的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;
}

如果弯曲方向改为行，而我在讲宽度而不是高度，那么这个问题应该是相同的。

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