CSS + flex + height 100%

Question

I'm facing a problem that I'm building a page using GWT framework and I'm trying to set 100% of height to an element and it doesn't work.

Is something like that:

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

Div main - I don't have access to change the code, because is a framework;

Div 1 - style=display:flex;

Div 2 - style=display:flex;flex-direction:column; height:100%;

And so on..

Using the chrome developer tools if I set the height 100% for the main div and the div 1, I will get height 100% for my content, otherwise I won't.

The question is, how can I set it without change the main div? Because as I said, I don't have access to it...

Answer 1

It looks like you are wanting to use the flex: 1 rule. I think I fully understand that your #main has a height that can not be touched, and your most child <div> should fill the content. Try the following and check out the example...

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

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

Note - I changed your ID's for CSS selectors. Unsure if this is how you were doing it, but keep in mind why ID’s Cannot Start With a Number is you intent to target them with CSS selectors.

JSFiddle Link - working example