Как сохранить два элемента 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;
}

JSFiddle

Этот вопрос должен быть таким же, если направление гибкого движения было вместо строки, а я говорил о ширине, а не о высоте.

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>