Issue
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...
Solution
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
Answered By - scniro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.