CODEWITHSUNDEEP
htmlcssflexbox
Samia Ruponti
Samia Ruponti

Reputation: 4038

Flex grandchildren doesn't expand to immediate parent's height

I have the following layout (simplified version). .account is the flex-container and .card-two holds the actual table. When there is a lot of content, everything works fine, but when .card-two doesn't have enough content (when showing error messages), it does not fill the height of its parent .content. the cards have a background color set, so the entire effect looks quite ugly.

How do I make the card behave and stretch to fill its container? I tried setting height on .account, setting flex-basis:1 0 0, but it doesn't work. setting height:100% to .card-two just makes it massively overflow its parent. Note: I do not have a lot of control on the 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 (without the changes I have tried): 

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

 .account{
  display: flex;
  }

  .sidebar{
  width: 25%;
   }

   .content{
    width: 75%;
     }

here's a codepen (with some comments as to what I have tried): https://codepen.io/samia92/full/MVJqwQ

any help is much appreciated.

Upvotes: 0

Views: 357

Answers (1)

Athul Nath
Athul Nath

Reputation: 2606

You need to add flex to .content then only card-two can have flexbox properties.

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

Upvotes: 1

Related Questions