CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3flexbox
Chad J Treadway
Chad J Treadway

Reputation: 422

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

Upvotes: 1

Views: 669

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Shouldn't be too difficult, without flexbox grid nor the need to change HTML markup.

.row {
  display: flex;
}

.col-sm-6 .row {
  flex-direction: column;
  height: 100%;
  .col-sm-12 {flex: 1;}
}

https://codepen.io/anon/pen/pbojjQ

Upvotes: 1

dippas
dippas

Reputation: 60543

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>

Upvotes: 3

Related Questions