使 flex div 的子级具有相同的高度（基于每“行”）

Question

我有一个.parent带有子 div（你猜对了，.child）的 Flex div ()，它可以包含更多行。我的问题是，我似乎无法让每个 div 的边框.card具有相同的高度而不破坏我的“网格”。当我尝试为 等指定特定高度时.child，高度看起来很糟糕，因为并非每行都具有相同的内容长度。我见过这样的例子，但不知道如何用 Flex 来解决它，以便多行具有相同的高度（而不是每个“单元格”都具有相同的高度并产生尽可能多的混乱。

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  height: 100%;
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

试图避免这里发生的事情（当前代码示例）：https ://jsfiddle.net/4gy7fzw1/

没有设置高度的代码示例：https://jsfiddle.net/t2yzfkm9/

Answer 1

通常，要使 Flexbox 布局中的每一列具有相同的高度，您需要做的就是display: flex在父元素 ( .parent) 上指定。在您的具体情况下，您将设置height: 100%子元素 ( .child)。

在 Flexbox 中，height: 100%实际上与您预期的相反，因为百分比驱动的值基于包含块的高度。height: auto将允许元素展开（并且是默认值）。

简而言之，要使列的高度相等，只需从以下位置删除 ：height: 100%.child

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  /*height: 100%;*/
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>