html - 使用 Flexbox 时，子 div 高度应等于其父级高度

Question

我的要求是我希望所有文本类 div 应该具有相同的高度，或者应该占据父 div col 的所有高度。

.flexbox {
  display: flex;
}

.col {
  border: 1px solid;
  margin: 20px;
}

.text {
  background: green;
}

<div class="flexbox">
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <h3>I am listed first in source order.</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

Here is the link for working code

Answer 1

您需要在父 div 上使用 flex-direction: column 并在子 div 上使用 flex: 1。

因此向您的 .col 类添加:

display: flex;
flex-direction: column;

并向 .text 类添加:

flex:1;

.flexbox {
  display: flex;
}

.col {
  border: 1px solid;
  margin: 20px;
  display: flex;
  flex-direction: column
}

.text {
  background: green;
  flex: 1;
}

<div class="flexbox">
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <h3>I am listed first in source order.</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

Here is the fiddle to play with.

希望这有帮助。