Html 灵活的孙辈不'；t扩展到直接父项'；s高度

我有以下布局（简化版）

.account

是flex容器，

.card two

保存实际表。当有很多内容时，一切正常，但是当

.card two

没有足够的内容时（显示错误消息时），它无法填充其父

.content

的高度。这些卡片有一套背景色，所以整个效果看起来很难看

如何使卡片发挥作用并拉伸以填充其容器？我试着在

.account

上设置高度，设置

弹性基础：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>

下面是一个代码笔（对我尝试过的内容有一些评论）：

---

非常感谢您的帮助

您需要将

flex

添加到

.content

中，然后只有

card two

可以具有

flexbox

属性

.container{
宽度：600px；
保证金：自动；
框大小：边框框；
}
.帐户{
显示器：flex；
高度：400px；
}
.卡片{
背景：ddd；
盒影：1px2p2pRGBA（0,0,0,0.5）；
填充：15px；
}
.侧边栏{
宽度：25%；
右边距：10px；
}
.内容{
宽度：75%；
显示：flex；/*已添加*/
弯曲方向：列；/*添加*/
}
.第一张牌{
边缘底部：20px；
}
.第二张牌{
弹性：1；/*添加*/
}

这是一个侧边栏，又名第一列
这是一号卡。父对象的全宽

这张卡片应该有很多内容。但有时情况并非如此

我希望它扩展到它的父级，它有适当的高度

好了

你知道第一张牌的高度吗？不知道。所有内容都是动态的。

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

 .account{
  display: flex;
  }

  .sidebar{
  width: 25%;
   }

   .content{
    width: 75%;
     }