Question

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

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

HTML code：

<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个属性。

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

Flex孙子孙女并没有扩展到直接父母的身高

1 个答案: