Issues with flex divs rendering improperly on mobile browsers

Question

Issues with flex divs rendering improperly on mobile browsers

I am working on a website design that consists of two main parts: the top section where the menu is located, and the content section which contains 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 should take up as much space as necessary for the menu content, while the content should fill the remaining space on the site. Together, they should occupy 100% of the width and 100% of the height.

This setup functions properly on desktop computers, but on mobile browsers like Chrome, Firefox, and Safari, the height of the site increases to accommodate the height of the menu.

The content extends beyond 100% due to the inclusion of the menu. Can someone please help me understand what I may be doing incorrectly in this scenario?

html css flexbox

Answer 1

Answer №1

The Fundamentals

If you want to assign percentage heights to elements, their parents must have a specified height. It can be perplexing because these parent elements include <html> and <body>. Take a look at this example:

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

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

<div></div>

In this scenario, both the <html>, <body>, and <div> elements are set with height: 100%. This cascades down to each child element:

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

To simplify things, we can grant the <body> element 100% height using a viewport height unit. By doing so, we eliminate the need to deal with setting the height for <html>. Here's an alternative example:

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

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

<div></div>

Now, the <body> covers 100% of the viewport height, enabling its children to receive percentage heights without explicitly defining a height for <html>.

Your Objectives

Keeping this in mind, let's streamline your example to its essence. Here is precisely what you've described using the minimal number of elements required:

The <body> can act as the flex container with the following settings:
- display: flex and flex-direction: column
- margin: 0 to eliminate the default body margin
- height: 100vh to expand it to 100% of the viewport height
- The <div class="top"> serves as your header containing the menu; no need for a flex property as it will adjust to fit its contents
- The <div class="content"> is given flex: 1 to grow and occupy the remaining 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>

Answer 2

The Fundamentals

If you want to assign percentage heights to elements, their parents must have a specified height. It can be perplexing because these parent elements include <html> and <body>. Take a look at this example:

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

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

<div></div>

In this scenario, both the <html>, <body>, and <div> elements are set with height: 100%. This cascades down to each child element:

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

To simplify things, we can grant the <body> element 100% height using a viewport height unit. By doing so, we eliminate the need to deal with setting the height for <html>. Here's an alternative example:

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

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

<div></div>

Now, the <body> covers 100% of the viewport height, enabling its children to receive percentage heights without explicitly defining a height for <html>.

Your Objectives

Keeping this in mind, let's streamline your example to its essence. Here is precisely what you've described using the minimal number of elements required:

The <body> can act as the flex container with the following settings:
- display: flex and flex-direction: column
- margin: 0 to eliminate the default body margin
- height: 100vh to expand it to 100% of the viewport height
- The <div class="top"> serves as your header containing the menu; no need for a flex property as it will adjust to fit its contents
- The <div class="content"> is given flex: 1 to grow and occupy the remaining 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>

Issues with flex divs rendering improperly on mobile browsers

Answer №1

The Fundamentals

Your Objectives

Similar questions

Illustration within the <li> element

Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

Highlighted Answer: Choosing between two options in the quiz

Integrating JavaScript and CSS files into Spring MVC

Adjust the alignment of tooltip text to the left in Bootstrap 4

Compass encountered an error stating 'Invalid CSS after "expression" was "expression".' Can you believe it?

Tips for stopping a click from going through a fixed element to the one in the background

Retrieve Files with Angular Framework

Using base64 encoding for font-face with alternative fallbacks

Implementing auto-generated IDs for submission buttons for posted content in JavaScript

how can I perform a scrollTo function without any animation effects?

Using the ternary operator for the background-color style attribute in knockoutjs

Two distinct styles showcasing contrasting hues

Dealing with unnecessary gaps separating div elements within bootstrap and HTML code

Align text to the left and right with a centered div

Guide on redirecting the user to a specific page using an iframe

Is there a glitch causing the Owl carousel to malfunction?

What is the best way to adjust image size according to the dimensions of the parent container using CSS

Are HTML mistakes considered as WCAG violations?

Using a combination of HTML and CSS3, craft this specific geometric design