Responsive flexbox filling all the browser height

Question

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>

Please use a [minimal, reproduciable code snippet](https://stackoverflow.com/help/minimal-reproducible-example) next time. With a main focus on minimal. 30 lines of HTML code that was cut down by both editors to 8 lines afetr clearing your excessive use of whitespace is unecessary usage of code-lines. Also no need to use 3 media queries with the exact same content. One would be sufficient. — tacoshy, Jun 22 '21 at 11:35

tacoshy · Accepted Answer · 2021-06-27T12:58:07.340

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>

Thank you !It is way more clear now. I had the feelling it was the wrong approach, i will check your reference ;) — dine, Jun 22 '21 at 12:32
Hey! I have an other struggle with this code. I am trying to center the Loren ipsum text in the middle of the item two, not horizontally but vertically. I have tried align-items: center and align-content: center. But it seems to center the red boxes on the horizontal axis but not the text. Is this possible to do or should I play with the padding? — dine, Jun 27 '21 at 12:29
@dine add: `.two { display: flex; align-items: center; }` This makes the middle box as flexbox aswell. then `align-items: center;` can be used to vertically center the text. See the edit of my code snippet. If it solves the issue for you, please consider to mark it as an answer then. — tacoshy, Jun 27 '21 at 12:57

Responsive flexbox filling all the browser height

1 Answers1