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
  • 630,065
  • 150
  • 1,295
  • 1,284
Lara
  • 1,655
  • 5
  • 20
  • 39

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

scniro
  • 15,980
  • 8
  • 54
  • 101
  • 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