Responsive flexbox filling all the browser height [duplicate] - html

Question

This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 1 year ago.
I am learning flexbox and my goal is to create a simple flexbox of 3 items that would be responsive to a different device (smartphone, tablets, desktop…).
The items should be one on top of the other and together fill all the browser width and height.So basically there should never be a scroll.
(to sum up one item at the very top, one at the bottom of the page and the rest takes the left space inbetween).
The width part on desktop and smartphones seems to work. But how to fill the height of the browser and how the font and the boxes adapt to the different height of the different devices is still a mystery for me.
My temporary solution was to increase the margin for smartphone…
What are your thoughts?
Here is what I did:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
font-size: 3em;
}
.item {
border: 5px solid red;
margin-bottom: 40px;
}
#media screen and (max-width: 500px) {
.element {
margin-bottom: 70px;
}
}
.one {
flex-basis: 100%;
display: flex;
}
.two {
flex-basis: 80%;
display: flex;
}
#media screen and (max-width: 64em) {
body {
font-size: 80%;
}
}
#media screen and (max-width: 50em) {
body {
font-size: 70%;
}
}
#media screen and (max-width: 30em) {
body {
font-size: 60%;
}
}
.three {
flex-basis: 100%;
}
<div class="container">
<div class="item one">1</div>
<div class="item two">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="item three">3</div>
</div>

Answer 1

Simply use flex-grow: 1; to make a flex-item consume all remaining space within the conatainer.
First at all we need to reset the body margin: body { margin: 0; }
The body margin is set by the UA (default stylesheet of a browser) and as such differs between browsers. This will make it impossible to calculate the correct margins for all browsers and to prevent an overflow.
Next we need to give the flex-container a height to fill the entire viewport height: .container { height: 100vh; }. To emulate the body margin we give it now a padding aswell. To prevent an overflow we add box-sizing: border-box; as otherwise the padding would go on top of the 100vh and overflow vertically.
Then we apply flexbox and change the flex-direction to: .container { flex-direction: column; }
Last but not least we add the mentioned above flex-grow: .two { flex-grow: 1; }. This will make the middle item span the entire remaining height. Also to seperate them form the top and bottom box, we can add a margin like: .two { margin: 6px 0; }
As for the question of your font-size: It is impossible to set it correctly for all devices by using media-queries. It is the completely wrong approach. For that you need to do scripting. Alternativly you could use libraries which would make it easier. A good reference can be found here: Fitting Text to a Container
PS: You could also just simply get rid of the container itself and use the body as container directly in your markup.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
padding: 6px;
box-sizing: border-box;
}
.two {
flex-grow: 1;
margin: 6px 0;
}
.item {
border: 2px solid red;
}
/* Edit on OP request */
.two {
display: flex;
align-items: center;
}
<div class="container">
<div class="item one">1</div>
<div class="item two">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="item three">3</div>
</div>