Flex Div not reaching full height

I am facing an issue where the body is set to full height, but the containing div with a min-height of 100% is not filling up. My goal is to have the blue color fill its body container and flex align the internal divs.

Visit this link for reference

html {
  min-height: 100%;
  width: 100%;
}

body {
  min-height: 100%;
  width: 100%;
  background-color: green;
}

.main {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

htmlcssflexboxheight

Answer №1

Make sure to familiarize yourself with the concept of Height Calculation By Browsers : Containing Blocks and Children. Remember, in CSS, height and min-height serve different purposes.

To adjust the sizing of your body and html, switch from using min-height to height - check out the demo below for reference:

html{
  height: 100%; /* updated to height */
  width: 100%;
}
body{
  height: 100%; /* updated to height */
  width: 100%;
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

You can also use height: 100vh on the main element to specify an intrinsic height for the flexbox layout - see the demo below for implementation:

body{
  margin: 0;
  height: 100vh; /* full viewport height */
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Answer №2

To achieve a full-height layout, set the min-height of the .main class to 100vh.

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

Check out the demo here: https://codepen.io/anon/pen/pYKzzM

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

What is the best way to align two HTML elements in a single column?

I need to adjust the layout of an existing <td> in order to display a checkbox and one additional field on the same line. The current setup places these elements on separate lines. Below is the provided HTML code: <!DOCTYPE html> <html> ...

htmlcsshtml-table

Use JavaScript to submit a form in Django containing the <a></a> tag

I am having an issue with my form submission using JavaScript. When I try to submit the form, it is sending a GET request to the backend, but I am expecting it to send a POST request instead. Here is the HTML file code snippet: <form id="my_form&qu ...

javascriptpythonhtmldjangodjango-templates

PHP infinite redirection loop

I have encountered an issue where a user can successfully submit an event to a calendar, but I am facing difficulty redirecting them back to the original page. I attempted to use the following code snippet: header("Location: http://localhost/Project/Vie ...

phphtmlredirectheader

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Looking for a solution in Bootstrap 4 that mirrors the offset feature in Bootstrap 3, but pushes a div to the left instead of right. Need a way to have multiple dynamic divs within a row, where one div is pushed to the left on its own row without the nee ...

htmlcssbootstrap-4

Centered div's overflow remains visible

Yes, the positioning of the parent container is set to relative. I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport. I have created circular divs that are ...

htmlcssoverflow

Difficulty with implementing CSS Sprites in a jQuery-driven menu

Facing issues with a code base that was previously owned by someone else. Deadline is approaching fast and struggling to solve a particular issue. This code includes a table in the top section of the page, featuring a drop-down menu using CSS sprites for ...

jqueryhtmlcss

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...

javascripthtmlcss

Expanding container in table-cell to occupy full height of its parent element

I have encountered some issues with using flexbox for vertical alignment in our specific use case, so I am attempting to achieve it using a table instead. While the table method works well for vertical alignment, I am facing an issue where the content insi ...

htmlcss

Setting a Google Map marker by latitude and longitude and adding an information bubble can be achieved by following these simple

The code below is a sample provided by the Google Maps API. var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.77627, -73.91096 ...

javascripthtmlgoogle-maps

Delay the execution using Javascript/jQuery, remove the last element from the DOM

Within a jQuery AJAX call, I am using a $.each() loop. Each element in the response data triggers the addition of a portion of HTML to a container class in my index.html file. To view the code and ensure proper formatting, visit the codepen here as the pa ...

javascriptjqueryhtmlcss

If I choose a different option from the dropdown list, I would like a textbox to appear

Hey there, I have a list of industries and one of the options is "Other". When a user clicks on "Other", a text box should appear for them to specify. I'm struggling to make this work using Django AJAX. Any help would be appreciated! <div class ...

htmldjango

Mastering Sprite Movement in JavaScript: Going Forward with Your Sprite

Currently, I am developing a JavaScript game that utilizes the canvas functionality in HTML 5. I am looking to create projectiles that are capable of moving towards a specific coordinate by using a vector2 (x, y) as the velocity. Is there a mathematical fo ...

javascripthtmlcanvasdrawing

Extract the <img> element from the Angular model property

I'm currently leveraging Angular to display some HTML content: <p class="description" ng-model="listing.Description"></p> When the content is rendered, it includes images within the text, which is acceptable. However, now I aim to ident ...

javascripthtmlangularjs

Use Angular mat-table to dynamically insert data by specifying the row index and column index

I am in the process of constructing a table with a response that includes both the number of rows and the number of columns. Within this table, I possess an array of objects that contain a row index number and a column index number, which I am endeavoring ...

javascripthtmlangularangular-materialmat-table

Email button designed to trigger the execution of PHP code

Can a hyperlink button in Outlook emails be used to run PHP code? For instance, I've designed a computer request form that appears as follows: New Request When you select the "new request" button, it changes to indicate completion: Completed Reque ...

phphtmldatabaseemailoutlook

Utilizing Functions Within Arrays and HTML

My latest coding project involves creating a fun program where a button triggers a switch in colors for different images resembling a traffic light. Unfortunately, when I test the program by clicking the button, nothing seems to happen. Check out below fo ...

javascripthtmlcssarraysfunction

Using Perl script to identify and highlight rows based on specific cell values

I am struggling with how to highlight a row when Column F displays a value of F. I understand that I can achieve this using CSS/JS, but I keep hitting a roadblock. Coding is new to me, so I would greatly appreciate some assistance if possible. Objective: ...

htmlcssperl

Fading bubble div with jQuery causing input obstruction

My webpage displays transparent hint boxes that are absolutely positioned over a table of HTML inputs. However, when I use jQuery's .fadeOut(200) to fade them out, the inputs that were underneath become unclickable. Interestingly, after zooming the b ...

javascriptjqueryhtmlfrontend