Chad J Treadway Chad J Treadway - 6 months ago 49
HTML Question

Flexbox equal height

I am in need of some

flexbox
help.

I am trying to get the column that contains item 2 and 3 to be equal in
height
to that of Column 1.

I would prefer if item 2 and 3 both stretched to fill the available space. I have tried about everything but nothings seems to be working.

Here is my HTML code

<div class="container ">
<div class="row yellow">
<div class="col-sm-6 pink">
<h1>Item 1</h1>
...
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 cyan">
<h1>Item 2</h1>
...
</div>
<div class="col-sm-12 green">
<h1>Item 3</h1>
...
</div>
</div>
</div>
</div>
</div>


I am using Bootstrap 3 and flexbox Grid which extends Bootstrap 3 to have flexbox properties.

CodePen Link

Flexbox Grid

Answer

Without using the framework flexboxgrid, just simple plain flexbox

body,
html {
  height: 100%
}
.yellow {
  background: yellow
}
.pink {
  background: pink
}
.cyan {
  background: cyan
}
.green {
  background: green
}
.container {
  display: flex;
  flex-flow: column wrap;
  height: 100%
}
.row,
.col-xs-6 {
  height: 100%
}
.col-xs-12 {
  height: 50%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
  <div class="row yellow">
    <div class="col-xs-6 pink">
      <h1>Item 1</h1>
      ...
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 cyan">
          <h1>Item 2</h1>
          ...
        </div>
        <div class="col-xs-12 green">
          <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Comments