Troubleshooting a height problem in a nested flex box using CSS

I am currently facing an issue with flex boxes nested inside other flex boxes. You can find the code snippet below or view the JS Fiddle here.

    #container{
      position: absolute;
      height: 100%;
      width: 100%;
      border: 3px solid yellow;
    }
    .app {
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 3px solid black;
    }
    .app-header {
      border: 3px solid red;
    }
    .app-content {
      border: 3px solid green;
      flex: 1;
      overflow: hidden;
    }
    .app-footer {
      border: 3px solid blue;
    }
   <div id="container">
      <div class="app">
        <div class="app-header">HEADER1</div>
        <div class="app-content">
          <div class="app">
            <div class="app-header">HEADER2</div>
            <div class="app-content">CONTENT2</div>
            <div class="app-footer">FOOTER2</div>
          </div>
        </div>
        <div class="app-footer">FOOTER1</div>
      </div>
    </div>

I am attempting to make the .app-content DIVs occupy the remaining space within the parent .app DIV. While this works for the outer containers in the fiddle, it doesn't behave as expected for the inner containers like CONTENT2. It seems that using height: 100% may not be effective when the exact height of the parent DIV is unknown... Any advice on how to achieve this behavior correctly?

Edit: The layout functions properly on Firefox but not on Chrome.

htmlcssgoogle-chromeflexbox

Answer №1

Typically, setting a height of 100% works if the parent element has a defined height. In this scenario, the outermost container app-content lacks a specific height value, causing the child element's 100% height property to not function as expected.

One workaround is to utilize relative-absolute positioning to control the dimensions of the child element:

#container {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  flex: 1;
  /* additional property */
  position: relative;
}
.app-footer {
  border: 3px solid blue;
}
/* extra rule */
.app-content > .app {
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* adjusting scrollbar and borders */
body {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
<div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

Answer №2

Uncertain if this meets your requirements, but it appears to be working properly in Chrome and Firefox! Possibly a nesting issue.

Utilizing flex on both container and content:

http://jsfiddle.net/fr077nn2/2/

#container{
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
  display: flex;
  flex-direction: column;
}
.app {
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  flex-grow: 1;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
}
.app-footer {
  border: 3px solid blue;
}

Answer №3

Why complicate when you can simplify?

Utilizing your existing markup

This excessive amount of HTML elements seems unnecessary.

To streamline the code, make sure to nest the flex all the way down. For instance, the main flex container has a height: 100vh property to occupy the entire viewport height. Some of the flex children also act as flex parents, having both display: flex and flex: 1 attributes so they can expand and contract accordingly, allowing their children to grow.

Sample

* {
  margin: 0;
  padding: 0;
  border: 0;
}
div {
  box-sizing: border-box;
}
#container {
  height: 100vh;
  border: 3px solid yellow;
  display: flex;
}
.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  display: flex;
  flex: 1;
  overflow: hidden;
}
.app-footer {
  border: 3px solid blue;
}
<div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

Simplified Demonstration

We can greatly simplify the code by reducing the number of elements and eliminating the need for nesting the flex properties. The content now simply has flex: 1 which allows it to fill up the available space left after headers and footers.

In this new setup, the body serves as the flex container itself, although a top-level div wrapper could replace it if needed.

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  flex: 1;
}
.app-footer {
  border: 3px solid blue;
}
<div class="app-header">HEADER1</div>

<div class="app-header">HEADER2</div>

<div class="app-content">CONTENT2</div>

<div class="app-footer">FOOTER2</div>

<div class="app-footer">FOOTER1</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

flask.cli.ApplicationNotFound: "app" could not be imported

from flask import Flask, render_template # Creating a Flask app and rendering templates app = Flask(__name__) # App named after the file @app.route('/') # Homepage route def index(): # Route handler return render_template('index.html& ...

pythonhtmlpython-3.xflaskjinja2

Trouble with executing jQuery $.ajax post to PHP within the same file

Here is the code snippet: <script> $( document ).ready(function() { $( ".button" ).click(function() { var clickBtnValue = $(this).val(); $.ajax({ //url: '', // url is empty because I'm working in the ...

phpjqueryhtmlajax

In JavaScript, the HTML <select> onclick event is fired when the down button of the scrollbar is clicked

I have encountered a problem while trying to use the onclick() event of the Select object. The function is triggered and executes correctly, but it also gets executed when clicking on the scroll bar's down button. This results in users not being able ...

javascripthtmlformsselect

Is there a way to dynamically update the 'src' attribute of an iframe by clicking on a different page?

On my website, I have two html pages named 1.html and 2.html. In 1.html, there are two buttons that each link to different websites - Google and Facebook. One button directs to Google The other button directs to Facebook Within 2.html, I have an iframe ...

javascriptjqueryhtml

How do browsers typically prioritize loading files into the cache?

Out of curiosity, I wonder if the categorization is determined by file names or byte code? It's possible that it varies across different browsers. Thank you! ...

javascripthtmlcssbrowsercross-browser

Steps to add a background image without a border:

I am struggling to insert an image within an anchor tag. <a> <img calss="imageclass"/></a> Whenever I try, a border appears around the image. I have attempted using CSS properties like border: 0 and border-style:none, but nothing seems ...

htmlcssimage

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

As a newcomer to front-end development, one issue I frequently encounter is avoiding repetition when dynamically generating HTML using JS/jQuery. Imagine you have a DOM object that has various states. Typically, all you need to do with JS is switch betwee ...

javascriptjqueryhtmldry

Utilize the drop-down feature in HTML to create page links on your website through site.google

Can someone help me with writing the necessary code inside the value field of a dropdown menu on site.google? I want to link different pages using this dropdown, but I'm not sure how to make it function properly. Any guidance would be greatly apprecia ...

htmlgoogle-apps-scriptdrop-down-menu

The entire space on an HTML page should be occupied with content from the header to the footer

I am currently implementing jQuery Mobile on my project. The page I have created consists of a fixed header and footer with only two buttons. Due to the fixed footer, half of the page is in silver color (data-theme=c) while the bottom half is gray. My goa ...

jqueryhtmljquery-mobile

Combine all input values into one using jQuery

I have four text boxes and I want to append the value of each box to a certain text box with a comma on KeyUp function, in addition to the default value. The issue is that it keeps overwriting the previous value. I am looking for an output like this: 0 ...

jqueryhtmlonkeypress

"Discover the process of using Puppeteer to extract information from a website, even when dealing with input fields that are set

I'm attempting to replicate the structure of a website using puppeteer, and here's what I have so far: page = await this.createPage(browser); page.setContent(await originalPage.content()); The issue arises from input fields in the DOM that are ...

jqueryhtmlpuppeteer

Storm, the crooning guitarist, and real-time alerts

After conducting research on various platforms, I have only found information on using Tornado as an HTTP server. My current dilemma is how to initiate push notifications within this system? To provide some background... The database I am dealing with ...

javascriptdjangohtmlpush-notificationtornado

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using slot[name=foo]::slotted(:nth-child(2)){, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit. ...

javascriptcssweb-component

Execute the script only if the designated object is present on the page

A few years ago, I wrote some JavaScript code that is now causing errors to pop up in the console on pages where the object it relies on is not present. The error messages look like this... Cannot read property 'top' of undefined TypeError: Ca ...

javascriptjqueryhtml

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

javascripthtmlcssreactjshtml5-video

Create professional and polished email content by utilizing HTML formatting techniques

I'm having trouble formatting the email body with line breaks in mind, and I'm using the following code: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50233f3d353f3e35103528313d203c357e333f3d"> ...

htmlemailhtml-email

Within the mobile view, a button with accompanying description will be discreetly concealed

Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows: <div class="container"> <div class="row "> <div class="col-xl-2 mx-auto d-none d-sm-block"> ...

htmlcssasp.net-corebootstrap-4

Achieve Full Height with Bootstrap 4!

I have gone through numerous threads on this issue and attempted all the suggestions, but nothing seemed to work for me. Here is the code I am currently using: <div class="container-fluid d-flex flex-column" style="height: 1 ...

htmlcssangulartwitter-bootstrapbootstrap-4

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson