No content displayed as I adjust the height of a child element

Oftentimes, I find myself wanting to create a clean and simple web page layout using flexbox. Here's an example of what I'm aiming for:

https://i.sstatic.net/0xYX5.png

Here is the code snippet I have tried so far:

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.header {
  height: 40px;
  background-color: red;
  width: 100%;
}

.sidenav {
  background-color: blue;
  align-items: flex-start;
}

.main {
  background-color: green;
  flex-grow: 1;
}
<div class="container">
  <header class="header">Header</header>
  <nav class="inner sidenav">Sidenav</nav>
  <div class="inner main">Main</div>
</div>

I've encountered an issue where there is a blank space between the header and the other elements when I set the height of the .header. Can anyone explain why this happens and offer a solution to fix it without adding extra wrappers?

htmlcssflexbox

Answer №1

It appears that the content is divided into two flex rows, but there seems to be some extra space left when distributing height between these rows. This leftover space is not automatically given to the last row, resulting in a gap unless the window's height is adjusted to match the exact height of the contents.

If you would like the second row to occupy the remaining space using CSS, you can assign the remaining height to it with the following CSS code:

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.header {
  height: 40px;
  background-color: red;
  width: 100%;
}

.sidenav {
  background-color: blue;
  align-items: flex-start;
  height: calc(100vh - 40px);
}

.main {
  background-color: green;
  flex-grow: 1;
}

body
{
  margin: 0
}
<div class="container">
  <header class="header">Header</header>
  <nav class="inner sidenav">Sidenav</nav>
  <div class="inner main">Main</div>
</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

Real estate for a targeted audience

1. Overview I have a list of selectors that should always apply certain properties. Some selectors require additional properties to be added. I'm struggling to find a way to achieve this without repeating code. 2. Minimal CSS Example (MCVE) 2.1 ...

cssstylus

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss

Clicking on a span will allow you to alter the text within a paragraph located in a

I am hoping to update a paragraph of text with new content when a faux 'link' (span) at the bottom of the page is clicked. This is what I have so far <body> <p> This is the paragraph that should be changed after clicking on the sp ...

javascriptjqueryhtml

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

htmlcss

creating a custom data display with Flask

Hey, I'm having some trouble getting my table to work. Can anyone help me with this issue? Here's the python code: @app.route('/books') def result(): dict={'Series Title': 'Batman Vol.1: The Count of the Owls', ...

pythonhtmlflaskjinja2

Center the Div element while keeping it responsive

I am currently working on my personal portfolio website and I am trying to center and align a circular shape that I have animated using CSS. I want to make sure that it remains responsive as well. So far, I have attempted to use flexbox. Here is the code ...

htmlcssresponsive-design

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow

Spinning text within a responsive bootstrap card

I have a card containing text that is not wrapping properly within the card due to rotation using CSS. <div class="card border-info"> <div id="heading_card" class="card-header"> a very long string of text which is not g ...

htmlcssbootstrap-4

Strange occurrences observed in the functionality of Angular Material Version 16

Encountered a strange bug recently. Whenever the page height exceeds the viewport due to mat-form-fields, I'm facing an issue where some elements, particularly those from Angular Material, fail to load. Here's a GIF demonstrating the problem: GI ...

htmlangulartypescriptangular-material

Set the first link in a menu to be highlighted as active using jquery

In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link ...

jqueryhtmlcss

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds? I am able to change the button color using an onClick event in my script. However, I encounter scope errors when tryi ...

javascripthtmlcss

The ion-item is refusing to be centered on the page

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

htmlcssionic-frameworkionic4

Implementing a download hyperlink attribute for a button with jQuery

How can I create a jQuery function for a button? <input type="submit" id="submit"></input> Once clicked, it should trigger the following action: <a download href="file.doc"></a> <script> $("#submit").click(function(){ ...

javascriptjqueryhtml

Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...

htmlcssbootstrap-4

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

javascripthtmlcssreactjsdom

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

Angular has trouble displaying information across multiple HTML files

I have created an HTML file to display some data. The initial HTML file named disc-log.html looks like this: <div> <h2>Discs</h2> <jhi-alert></jhi-alert> <div class="container-fluid"> <div class=" ...

javascripthtmlangularjsjhipster

Interacting with a PNG file using a border radius in Internet Explorer 9 is causing issues with its transparency

Encountering an issue with IE9 where a white to gray gradient box appears around the transparent PNG on hover/selection. There is also a border radius applied to the thumbnail. Any ideas on how to fix this problem? Here is an example of the issue: https ...

htmlcss

Troubleshooting the Confirm Form Resubmission problem on my website

Hello everyone! I'm working on a website and facing an issue where refreshing the page triggers a confirm form resubmission prompt. Could someone please advise me on how to resolve this? Thank you in advance! ...

javascriptphpcssajaxweb

Steps to create a customized on-click effect for the search button

I have created the following: https://i.sstatic.net/Eu9kh.png And I am aiming for this: https://i.sstatic.net/maKCM.png Both search bars have on-click states but I am struggling to achieve this using bootstrap, CSS, JS. Can someone guide me on how to ...

javascripthtmlcssbootstrap-5