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

Question

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

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

希望这对您有所帮助。