Force child div to stretch so the parent div captures 100% of screen's height-CodePudding

I have the following html layout:

<div >
    <div >
        <div ><!-- some content here --></div>
        <div ><!-- some content here --></div>
    </div>
    <div ><!-- some content here --></div>
</div>

So I have two rows (content and footer) and the first row has two columns.

The footer's (row two) height is not set and is defined from it's content.

How can I force my content area (row one) to stretch so the entire wrapper div takes 100% of screen's height?

Some indicative (not working) css here:

.wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.row.one {
    width: 100%;
    display: flex;
}

.row.two {
    width: 100%;
}

.row.one .col.one {}

.row.one .col.two {}

CodePudding user response：

Setting the height of the wrapper to the height of the viewport, and then stretching the flexbox contents (column... not row) vertically has always worked well for me.

.wrapper {
    display: flex;
    flex-flow:  column nowrap;
    align-items: stretch;
    height: 100vh;
    width: 100vw; /* or whatever */
}

.row {
    flex: auto;
    width: 100%;
    ...
}

CodePudding user response：

Try this:

.wrapper {
display: inline-block;
height: 100vh;
width: 100%;
}

.row.one {
display: flex;
height: 100%;
}

.row.two {
}

.row.one .col.one {}

.row.one .col.two {}

CodePudding user response：

css viewheight will achieve what you want.

100vh applied to .row.one makes the div occupy the full visible height.

.row.one {
background: pink;
height: 100vh;
}

<div >
    <div >
        <div >some content here </div>
        <div >some other content here </div>
    </div>
    <div >footer content</div>
</div>