CODEWITHSUNDEEP
htmlcss
Guesser
Guesser

Reputation: 1857

CSS - Flexbox child height of parent (multi-column)

There are a lot of examples explaining how to get a flexbox child 100% the height of it's parent but when I add multiple column the various strategies don't work.

The code below ends up stacking the boxes on top of each other, they should be side by side.

https://jsfiddle.net/pqmv4pc4/

#snippet-container {
      height: 300px;
      width: 200px;
    }
    
    #page {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    
    #content {
      display: flex;
      height: 100%;
      background: blue;
      width:50%;
    }
    
    #content .test {
      width: 100%;
      height: 100%;
      background: yellow;
      border: 2px solid red;
    }
<div id="snippet-container">
          <div id="page">
          
            <div id="content">
              <div class="test"></div>
            </div>
          
             <div id="content">
              <div class="test"></div>
            </div>
                
          </div>
    </div>

Upvotes: 1

Views: 73

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9338

Is this wat u want?

The default flex-direction of flex container is row, that means all its children will be arranged in row.

Also, The flex-flow property is a shorthand property for the following properties:

flex-direction
flex-wrap


#snippet-container {
  height: 300px;
  width: 200px;
}

#page {
  display: flex;
  height: 100%;
}

#content {
  display: flex;
  height: 100%;
  background: blue;
  width: 50%;
}

#content .test {
  width: 100%;
  height: 100%;
  background: yellow;
  border: 2px solid red;
}
<div id="snippet-container">
  <div id="page">

    <div id="content">
      <div class="test"></div>
    </div>

    <div id="content">
      <div class="test"></div>
    </div>

  </div>
</div>

Upvotes: 0

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

#page should be flex-flow: row; not column.

#snippet-container {
  height: 300px;
  width: 200px;
}

#page {
  display: flex;
  flex-flow: row;
  height: 100%;
}

#content {
  display: flex;
  height: 100%;
  background: blue;
  width:50%;
}

#content .test {
  width: 100%;
  height: 100%;
  background: yellow;
  border: 2px solid red;
}
<div id="snippet-container">
  <div id="page">
  
    <div id="content">
      <div class="test"></div>
    </div>
  
     <div id="content">
      <div class="test"></div>
    </div>
    
  </div>
</div>

Upvotes: 2

Related Questions