Utilizing CSS with flex to set the height to 100% of the

Question

Utilizing CSS with flex to set the height to 100% of the

I've encountered an issue while constructing a page with the GWT framework where setting an element's height to 100% doesn't work.

Consider the following structure:

<div id="main">
        <div id="1">
            <div id="2"> 
                ...
            </div>
        </div>
    </div>

The main div cannot be altered since it belongs to the framework. Div 1 has the style display: flex;, and Div 2 has the style

display: flex; flex-direction: column; height: 100%;

.

When inspecting with Chrome Developer Tools, setting the heights of main div and div 1 to 100% results in proper content height, otherwise not.

My question is, how can I achieve this without modifying the main div, given that I don't have permission to do so?

html css flexbox

Answer 1

Answer №1

It seems like you're interested in utilizing the flex: 1 property. From what I gather, you want the #main element to have a fixed height while its child <div> fills the remaining space. Here's a suggestion along with an example:

    <div id="main">
        <div id="one">
            <div id="two"> 
            </div>
        </div>
    </div>

    #one {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    #two { 
        flex: 1;
    }

Keep in mind that I changed the IDs for CSS selectors for clarity. Make sure to avoid starting IDs with numbers if you intend to target them using CSS selectors. Learn more about this here.

Check out the working example on JSFiddle.

Answer 2

It seems like you're interested in utilizing the flex: 1 property. From what I gather, you want the #main element to have a fixed height while its child <div> fills the remaining space. Here's a suggestion along with an example:

    <div id="main">
        <div id="one">
            <div id="two"> 
            </div>
        </div>
    </div>

    #one {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    #two { 
        flex: 1;
    }

Keep in mind that I changed the IDs for CSS selectors for clarity. Make sure to avoid starting IDs with numbers if you intend to target them using CSS selectors. Learn more about this here.

Check out the working example on JSFiddle.

Utilizing CSS with flex to set the height to 100% of the

Answer №1

Similar questions

Create a stylish layout with two div elements positioned side by side using flexbox for a responsive design

js The correct value is not being set to the div's style.top

What is the most efficient method for incorporating CSS styles? What are the advantages of using @

HTML unable to render JSON data

When clicking, the fixed header and footer suddenly shift out of place

Can I set a nested DIV to a higher z-index than a parent DIV in IE7, so that it appears above it?

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

What is the best way to implement lazy loading of images that have not been downloaded in a JavaFX WebView?

Javascript-created HTML elements are failing to display on the webpage

Animating width using CSS3 with percentage values

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

Skipping a JSON field in HTML/JavaScript when it is blank: A guide for developers

jQuery can be utilized to iterate over a list and retrieve values, enabling the

Uploading Multiple Files in Google App Script

necessitated in specified input with assigned value

"Encountering an Internal Server Error while trying to submit the

The body element is inheriting the background-color

Looking to incorporate a raw JavaScript file into a React project

Can a webpage be redirected to another page after an animation using only HTML and CSS?

Issue with Bootstrap Alert functionality on local host page