Flex divs not displayed correctly in mobile browsers

Question

I'm trying to achieve a website design which basically has two parts. The top-part, where the menu of the site is and the content-part, with the information.

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}

.box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top {
  flex: 0 1 auto;
}

.content {
  flex: 1;
  position: relative;
  height: 100%;
}

<div class="wrap">
  <div class="box">
    <div class="top"></div>
    <div class="content"></div>
  </div>
</div>

The menu-div should be as big as needed for the menu-content to be displayed and the content-div should fill the rest of the site. Both together should fill 100% in width and 100% in height.

So, this construct works fine on desktop PCs, however - on mobile browsers for Chrome, Firefox, and Safari, the site's height gets extended by the menu's height.

The content is at 100% plus the menu. Can someone please explain to me what I'm doing wrong here?

(Probably not the “what am I doing wrong here” that you wanted pointing out, but – if your main container is absolutely positioned, that is definitively one of the things I would classify under that already.) — 04FS, Oct 30 '19 at 12:18
flex-wrap: wrap; did not help, - And, if I don´t position the wrap absolutley, the content doesn´t get displayed at all. - Which is weird. This code is copied from a tutorial, is there a better solution out there to achive what I want? — Andree Minidig, Oct 30 '19 at 12:25

misterManSam · Answer 1 · 2019-11-01T04:30:19.500

0

The Basics

In order to give elements percentage heights, their parents need a defined height. What can be confusing, is that these parents include <html> and <body> Consider this example:

html,body {
  height: 100%;
  margin: 0;
}

div {
  height: 100%;
  background: lightgreen;
}

<div></div>

Here the <html>, <body> and <div> elements have both been given height: 100%. This trickles down to each child element:

<html> is 100% of the browser viewport
<body> is 100% of its <html> parent
<div> is 100% of its <body> parent

We can simplify this and give the <body> element 100% height using a viewport height unit. This reduces complexity as we no longer need to worry about <html>. Consider this example:

body {
  height: 100vh;
  margin: 0;
}

div {
  height: 100%;
  background: lightgreen;
}

<div></div>

Here the <body> takes up 100% of the viewport height and its children can be given percentage heights. We don't need to define a height for <html>.

What You Want to Achieve

With this in mind, we can strip your example down to the basics. Here is exactly what you have described using as few elements as needed:

The <body> can be the flex container. It gets:
- display: flex and flex-direction: column
- margin: 0 to remove the default body margin.
- height: 100vh to stretch it to 100% of the viewport height.
- The <div class="top"> is your header that will contain your menu. We don't need to give it a flex property as it will shrink to fit its contents with the initial flex values it is given.
- The <div class="content"> is given flex: 1 to grow and fill the rest of the available space.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.top {
  background: pink;
}

.content {
  flex: 1;
  background: lightgreen;
}

<div class="top">Menu Content<br>Menu Content<br>Menu Content</div>
<div class="content"></div>

edited Nov 01 '19 at 04:30

answered Oct 30 '19 at 12:35

misterManSam

24,303
11
69
89

Thank you, but it still doesn´t work. Only on mobile-firefox without content it does. In Safari and Chrome I´m still able to scroll... - I´m using an Iphone 10 to test it with the latest browserversions. – Andree Minidig Oct 30 '19 at 13:01
@AndreeMinidig Wait, do you mean this? https://codepen.io/misterManSam/pen/VwwMBKG Put `overflow-y: auto;` on `.content` – misterManSam Oct 30 '19 at 13:13
I don´t want the user be able to scroll down, which makes the menue disappear. http://www.dayjob.at user: "test" password: "Test1234_" – Andree Minidig Oct 30 '19 at 13:17
@AndreeMinidig - Yep, I updated my example at the bottom of my answer. Put `overflow-y: auto` on the content div. As long as it and its children contain the content, it will scroll and the header will stay. – misterManSam Oct 30 '19 at 13:25
but, that is not the solution. I want the content + menue to be exactly as high as the viewport. – Andree Minidig Oct 30 '19 at 14:15
@AndreeMinidig - I'm afraid I don't understand. The content and menu *are* exactly as high as the viewport. However, if you fill the content div and it overflows you can either scroll the div with `overflow-y: auto` or cut off the extra content with `overflow-y: hidden`. – misterManSam Oct 30 '19 at 14:25
The content is still overflowing, when I put a div inside the content div with widht and height of 100% on mobile browsers. You can check it again on the link i provided – Andree Minidig Oct 30 '19 at 14:42
@AndreeMinidig I just tested on Mobile Chrome and Mobile Firefox on Android 10, Pixel 3, it doesn't scroll for me. – misterManSam Oct 30 '19 at 14:46
It looks like you need to add a few things for mobile browsers to scale them correctly. Like in this answer: https://stackoverflow.com/a/27127145/2930477 – misterManSam Oct 30 '19 at 14:47
Thanks for your help @misterManSam. I added the meta tag - It still is bigger than the viewport. Do you maybe have another idea for a solution without using flex? – Andree Minidig Oct 30 '19 at 16:56
It works in the mobileversion of firefox, but not in safari and chrome – Andree Minidig Oct 30 '19 at 17:07
I think that´s the problem: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ – Andree Minidig Oct 30 '19 at 18:40
I have one last question. In your example, the ".top" stayes like a fixed element always on top. Sometimes I have in the ".content"-div some content which overflows it and makes the site scrollable. I want then the ".top" to scroll with it. Could you maybe tell me how to do that. Thank you so much – Andree Minidig Oct 31 '19 at 12:13
@AndreeMinidig - In that case you *don't* want the `overflow-y: auto` on the content div. That's the reason the header is sticking, the body isn't scrolling, the div underneath it is. Make sure your content in the `.content` div isn't overflowing when you don't want it to. Example: https://codepen.io/misterManSam/pen/VwwMBKG – misterManSam Oct 31 '19 at 13:01

Flex divs not displayed correctly in mobile browsers

1 Answers1

The Basics

What You Want to Achieve