snow snow - 3 months ago 19
HTML Question

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

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

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've already applied this method.


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