html - flex 孙子不会扩展到直接 parent 的高度

Question

我有以下布局(简化版)。 .account 是 flex 容器，.card-two 包含实际的表。当内容很多时，一切正常，但是当 .card-two 没有足够的内容时(显示错误消息时)，它不会填充其父级 的高度.内容。卡片设置了背景颜色，所以整个效果看起来很丑。

我如何使卡片行为并拉伸(stretch)以填充其容器？我尝试在 .account 上设置高度，设置 flex-basis:1 0 0，但它不起作用。将 height:100% 设置为 .card-two 只会使其大量溢出其父项。注意:我对 HTML 没有太多控制权。

HTML代码:

<div class="container">
   <div class="account">
      <div class="sidebar">This is a sidebar aka the first column</div>
      <div class="content">
          <div class="card-one">this is card number one. full width of the parent</div>
          <div class="card-two">this card should have a lot of content. but sometimes it doesn't.</div>
      </div>
   </div>
</div>

CSS(没有我尝试过的更改):

.container{
 // just a generic container. 
 width:1140px; margin:auto;
 }

 .account{
  display: flex;
  }

  .sidebar{
  width: 25%;
   }

   .content{
    width: 75%;
     }

这是一个codepen(有一些关于我尝试过的评论):https://codepen.io/samia92/full/MVJqwQ

非常感谢任何帮助。

Answer 1

您需要将flex 添加到.content，然后只有card-two 可以具有flexbox 属性。

.container {
  width: 600px;
  margin: auto;
  box-sizing: border-box;
}

.account {
  display: flex;
  height: 400px;
}

.card {
  background: #ddd;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
  padding: 15px;
}

.sidebar {
  width: 25%;
  margin-right: 10px;
}

.content {
  width: 75%;
  display: flex; /*Addded*/
  flex-direction: column; /*Addded*/
}

.card-one {
  margin-bottom: 20px;
}

.card-two {
  flex: 1; /*Addded*/
}

<div class="container">
  <div class="account">
    <div class="sidebar card">
      This is a sidebar aka the first column
    </div>
    <div class="content">
      <div class="card-one card">
        <p>this is card number one. full width of the parent</p></div>
      <div class="card-two card"><p>this card should have a lot of content. but sometimes it doesn't.</p>
        <p>I want it to expand to it's parent, which has appropriate height</p>
        <p>There You go.</p>
      </div>
    </div>
  </div>
</div>