What is the best way to ensure grid element takes up 100% of the available height within a flex column

I am working with this HTML structure:

https://i.stack.imgur.com/fy5Yz.png

My goal is to have the .SceneWithHistory-Container take up 100% of the available height in its parent element. Below is my CSS code:

.Module-Container
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  height: 300px;

.Funnel-Container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}

.SceneWithHistory-Container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(450px, 532px) 1fr;
  margin-left: -16px;
  width: calc(100% + 32px);
  flex: 1;
}

.Module-SubmitFormButtons {
  background: #fff;
  height: 64px;
  bottom: 0;
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: 0px 16px;
  border-top: 0;
  box-shadow: var(--whiteBoxShadow);
  display: flex;
  align-items: center;
  margin-top: 0 !important;
  flex-shrink: 0;
}

I have tried setting flex: 1 for SceneWithHistory-Container but it's not occupying 100% of the available height. If my container .Moudule-Container has a height of 300px, I want SceneWithHistory-Container to be 300px minus the heights of Funnel-Container and Module-SubmitFormButtons.

Please refrain from suggesting to use height: calc(), as I prefer to have dynamic calculations within my parent element that are independent of its children.

htmlcss

Answer №1

Utilizing flex-grow allows an element within a flexbox to utilize all available space. Therefore, setting flex: 1 should achieve the desired effect. I have personally tested your code and it appears to be functioning correctly: https://jsfiddle.net/w5uLf4s6/4/. Is this not what you were aiming for?

Answer №2

When it comes to setting the height of a grid element, such as a greed element, there is no difference compared to setting the height of any other block element. As long as the grid item is within a container with a column direction and you have set flex: 1 to ensure flex-grow is 1, it will fill the remaining height accordingly. You can see this in action in the code snippet below.

The .Module-Container is outlined in red, while the .SceneWithHistory-Container is outlined in green.

.Module-Container {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 5px solid red;
}

.Funnel-Container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  border: 5px solid green;
}

.SceneWithHistory-Container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(450px, 532px) 1fr;
  margin-left: -16px;
  width: calc(100% + 32px);
  flex: 1;
  border: 5px solid blue;
}

.Module-SubmitFormButtons {
  background: #fff;
  height: 64px;
  bottom: 0;
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: 0px 16px;
  border-top: 0;
  box-shadow: var(--whiteBoxShadow);
  display: flex;
  align-items: center;
  margin-top: 0 !important;
  flex-shrink: 0;
  border: 5px solid pink;
}
<div class="Module-Container">
<div class="Funnel-Container">Funnel</div>
<div class="SceneWithHistory-Container">SceneWithHistory</div>
<div class="Module-SubmitFormButtons">Module-SubmitFormButtons</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

Creating a basic image carousel with JavaScript, CSS, and HTML

After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attemp ...

javascripthtmlcss

Steps on modifying the background of an element based on its location within the browser:

In the past, I've come across some impressive one-page websites with elements that would appear as you scroll. It seemed like they were created using just CSS. I think it might be achievable with the z-index and position properties? However, I can&ap ...

csswebz-index

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Best practices for organizing fonts in SCSS 7-1 architecture?

My current project restructuring involves implementing the 7-1 architecture recommended by . As part of this process, I am incorporating flaticons into my project. I'm unsure of where to place the folder and scss file provided by flaticon within the ...

cssarchitecturesassdirectory-structureproject-organization

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

javascriptcssreactjs

Issue with displaying MP4 movies in Angular

I'm trying to display an mp4 video in Angular 9: <video controls (click)="toggleVideo()" preload="none" *ngIf="post.moviePath != null" #videoPlayer> <source [src]="getMovieSanitazePath(post.moviePath ...

htmlangularvideomp4

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

I want to eliminate the empty space within the container while maintaining some spacing around the black box, and ensure responsiveness. Additionally, how can I shift the container with its content downwards and to the right of the webpage, while still ke ...

cssflexboxbootstrap-5

Generate a collection of div elements as child nodes

I'm working on a project where I have multiple rows with input fields. My goal is to create an array for each row that contains the values of the inputs. For example, if I have 3 rows and the values of 'input1' are 1, 'input2' are ...

javascriptjqueryhtmlarrays

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Is anyone else experiencing a specific issue after updating to WP 5.6? Since the update, all my websites are facing problems with rendering a Slick Slider in the Block Editor. Interestingly, everything looks fine on the front-end. The root of the problem ...

javascriptcsswordpressslick.js

Tips for incorporating inline styling into the body element

Can someone help me with adding inline style to the body element using jQuery? I want to set the background color to white (#FFFFFF). Your assistance would be highly appreciated. Thank you! ...

javascriptjqueryhtmlinline

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

javascripthtmlcsstabulator

The submit button fails to produce any result

I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...

phpjavascripthtml

Attempting to grasp the intricacies of HTML5/JS video playback quality

I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...

javascripthtmlvideovideo-streaming

The PHP form in an HTML file fails to function properly if multiple forms are included

When working with multiple forms in a PHP file that are called using the 'include' command, I encountered an issue where placing the include command before the forms on the HTML page made it work. However, I needed to call the include command bel ...

phphtmlforms

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

htmlcarouselbootstrap-5

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

javascriptcssreactjsfrontendmaterial-ui