3

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...

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Lara
  • 2,170
  • 6
  • 22
  • 43

1 Answers1

2

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

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
scniro
  • 16,844
  • 8
  • 62
  • 106
  • 1
    Under HTML**5** IDs *can* start with a number {[**SO Link**](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html)} but it's still not recommended. – Paulie_D Jul 18 '15 at 07:17
  • Sure they can it's just tricky if you want to target them with CSS selectors. There are workarounds in the article for it – scniro Jul 18 '15 at 14:32