flexbox: stretching the height of elements with flex-direction: row

Question

I want to stretch two div elements (.sideline and .main-contents) to reach the bottom of the page and stay at a certain height from the footer.

The two divs are nested inside a div (.row-elements) with the flex-direction: row since I wanted them to be on the same row.

/* body {
      display:flex;
      flex-direction:column;
    } */

.one-above-all {
  display: flex;
  flex-direction: column;
  /*   flex: 1 0 auto; */
  /*   min-height: 1100px; */
  border: solid black 1px;
}
.top-block {
  margin: 0 auto;
  border: solid black 1px;
  width: 300px;
  height: 30px;
  margin-top: -15px;
}
.headline {
  border: solid black 1px;
  width: 90%;
  align-self: flex-end;
  margin-top: 40px;
  margin-right: 10px;
  height: 160px;
  display: flex;
  box-sizing: border-box;
}
.row-elements {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  align-items: stretch;
  /*   min-height: 900px;
         flex: 1 0 auto;
       */
}
.sideline {
  width: 160px;
  border: solid 1px;
  margin-left: calc(10% - 10px);
  box-sizing: border-box;
  flex-shrink: 1
}
.main-contents {
  border: solid 1px;
  margin-left: 40px;
  /*   align-self: stretch; */
  flex: 1 1 auto;
  margin-right: 10px;
  box-sizing: border-box;
}
.bottom-block {
  align-self: flex-end;
  margin-top: auto;
  border: black solid 1px;
  margin: auto;
  width: 300px;
  height: 30px;
  margin-bottom: -10px;
  /*   margin-top: 880px; */
}
/* .stretch-test {
      border:solid, 1px;
      display: flex;
      flex-direction: column;
      
      flex: 1 0 auto;
    } */

<div class="one-above-all">
  <div class="top-block"></div>
  <div class="headline"></div>
  <!-- <div class="stretch-test"> -->
  <div class="row-elements">
    <div class="sideline"></div>
    <div class="main-contents">jhjkdhfjksdhafjksdahfl</div>
    <!--</div> -->
  </div>
</div>
<div class="bottom-block">footer</div>

Codepen

The commented out code in the css is the things I have tried.

I tried to set the body as flex and give the row-elements class flex property of 1 0 auto which didn't work.

I tried nesting the row-elements class (which has the flex-direction of row) in another div with a flex-direction of column and setting .row-elements to flex:1 0 auto which also didn't work.

I tried totally removing the the row-elements class but the two divs won't come on the same row.

Any solution will be appreciated.

Answer 1

To stick the footer to the bottom, here are two methods:

Method #1: justify-content: space-between

Align the container vertically with flex-direction: column. Then pin the last element to the bottom with justify-content: space-between.

revised codepen

Method #2: auto margins

Also with the container in column-direction, apply margin-top: auto to the footer, which spaces it away from the other flex items. (Seems you're already familiar with this method.)

Here's a detailed explanation for both: Methods for Aligning Flex Items

Make sure to define a height for your container, unless you simply want content height. In my example I've used height: 100vh on body.