Flexbox Item - Restrain Element Height

Question

I have what I fear is a pretty basic question... I'm creating a layout using Flexbox / Bootstrap but I'm running into a div height issue. My first block does not have that much content, my second has quite a bit, the third not very much at all. Is it possible to prevent the first block from stretching to match the height of the second?

I'd like to have the third block tuck under the first...

Here is a demo.

HTML

<div id="contentWrapper">
<div id="blockOne" class="block col-sm-6">
    <h1>Block One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum porttitor erat, vel porttitor turpis ullamcorper non. Proin a velit vitae elit feugiat imperdiet.</p>
</div>
<div id="blockThree" class="block col-sm-5">
    <h1>Block Three</h1>
    <p>Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.</p>
</div>
<div id="blockTwo" class="block col-sm-6">
    <h1>Block Two</h1>
    <p>Ut turpis enim, pharetra a semper in, hendrerit non dui. Praesent eget finibus magna. Proin eget aliquet tellus. Aliquam metus orci, volutpat eget nisi sed, fringilla eleifend diam. Vivamus sed gravida risus, nec posuere ipsum. Nulla facilisi. Morbi eleifend euismod vehicula. Proin finibus, velit in aliquam tincidunt, odio purus lacinia odio, at rutrum sem quam sit amet orci. Duis diam sem, pretium nec hendrerit quis, ultrices ac orci. Suspendisse accumsan iaculis ipsum, non auctor dolor laoreet vel. Suspendisse potenti. Ut porta nisi at sem posuere, id condimentum massa ultricies. Integer a odio molestie libero mattis aliquam in at risus. Aenean eget nisl ex. Sed id sem turpis.
        <br><br>
        Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.
    </p>
</div>

SCSS

#contentWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.block {
    padding: 1em;
}
#blockOne {
    background-color: #3498db;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}
#blockTwo {
    background-color: #e74c3c;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

#blockThree {
    background-color: #58d68d;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
}

I could but I'm hoping I can avoid restructuring everything. I realize I could divide the page up into separate columns: left and right... — drewalth, Jan 29 '18 at 21:32

score 0 · Accepted Answer · answered Jan 29 '18 at 21:35

You could use CSS Grid?

codepen

#contentWrapper {
  color: #404040;
  font-family: sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.block {
  padding: 1em;
}

#blockOne {
  background-color: #3498db;
}

#blockTwo {
  background-color: #e74c3c;
  grid-row: span 2;
}

#blockThree {
  background-color: #58d68d;
  order: 2;
}

<div id="contentWrapper">
  <div id="blockOne" class="block">
    <h1>Block One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum porttitor erat, vel porttitor turpis ullamcorper non. Proin a velit vitae elit feugiat imperdiet.</p>
  </div>
  <div id="blockThree" class="block">
    <h1>Block Three</h1>
    <p>Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate
      nec. Nunc sit amet congue enim. Suspendisse potenti.</p>
  </div>
  <div id="blockTwo" class="block">
    <h1>Block Two</h1>
    <p>Ut turpis enim, pharetra a semper in, hendrerit non dui. Praesent eget finibus magna. Proin eget aliquet tellus. Aliquam metus orci, volutpat eget nisi sed, fringilla eleifend diam. Vivamus sed gravida risus, nec posuere ipsum. Nulla facilisi. Morbi
      eleifend euismod vehicula. Proin finibus, velit in aliquam tincidunt, odio purus lacinia odio, at rutrum sem quam sit amet orci. Duis diam sem, pretium nec hendrerit quis, ultrices ac orci. Suspendisse accumsan iaculis ipsum, non auctor dolor laoreet
      vel. Suspendisse potenti. Ut porta nisi at sem posuere, id condimentum massa ultricies. Integer a odio molestie libero mattis aliquam in at risus. Aenean eget nisl ex. Sed id sem turpis.
      <br><br> Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum
      felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.
    </p>
  </div>
</div>

Flexbox Item - Restrain Element Height

1 Answers1