This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Setting height: 100% on my label element doesn't work
(2 answers)
Closed 3 years ago.
The innermost child div has a height of 0 even though its parent does not have a height of 0.
However, if I change the css property min-height to simply height in the topmost div then the innermost div takes up the whole screen (as expected)
Why does height and min-height behave differently in the topmost div?
<body>
<div style="
display: flex;
flex-direction: column;
min-height: 100vh;">
<div style="flex: 1">
<div style="height: 100%;"></div>
</div>
</div>
</body>
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 months ago.
<!DOCTYPE html>
<html>
<body style="height: 100vh">
<div style="display: inline-flex; flex-wrap: wrap; border-style: solid">
<div style="width: 100px; height: 100px; background-color: #FF0000"></div>
<div style="width: 100px; height: 100px; background-color: #00FF00"></div>
<div style="width: 100px; height: 100px; background-color: #0000FF"></div>
</div>
</body>
</html>
If you take that example and if you set your body width more than 300px, there is no problem. As you can see:
But if I for example make my screen width 200px in a responsive view, of course it causes wrapping, and my items look like this:
As you can see, my flexbox container takes width of parent again, as not behaving like inline flexbox. Why it becomes behaving like not inlined after it wraps its children? How can I make it take size of the children again after it gets wrapped as well?
What I'm just trying to achieve is to make my flexbox takes size of its children as what an inline container do.
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have a page like this :
<div id="parent">
<div id="childA">
List of some contents
</div>
<div id="childB">
The main content
</div>
</div>
#childA{
display: inline-block;
}
#childB{
display: inline-block;
}
I want to set the height of the parent div to the height of childB, but not childA.
If childA as a scrollBar in case it gets bigger than childB.
EDIT : I just realised I can approach the problem from a different angle. I hope it helps you understanding what I want. I need to set the height of a div (childA) according to the height of the div next to it (childB).
#childB{
overflow-y: scroll;
}
The height of both childs vary, but I want my parent's height equals to childB heigth.
I tried using table :
#parent{
display: table;
}
#childB{
display: table-row;
}
But childA keep increasing parent's height when it is bigger than childB
P.S. I know I can use JavaScript, but I would prefer not to use it.
I hope below example gives you some idea on how having some height and overflow-y on childA helps.
#parent {
display: flex;
border: 1px solid black;
}
#childA {
overflow-y: scroll;
height: 60px;
}
#childB {
}
<div id="parent">
<div id="childA">
List of some contents
List of some contents
List of some contents
List of some contents
List of some contents
</div>
<div id="childB">
The main content
The main content
The main contentThe main contentThe main content
The main content
The main content
The main content
The main content
</div>
</div>
This question already has answers here:
How to have child div of a flex, have its children full height [duplicate]
(1 answer)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I have been stuck on this and frankly don't even know how to google it, all my google efforts were fruitless. My HTML is as below:
<div class="uk-flex uk-flex-column uk-height-1-1">
<!-- normal div with height 100vh and flexbox of flex column -->
<div>div that will have height fit contents</div>
<div class="uk-flex-1">
<!-- div that will fill the remaining space -->
<div class="uk-height-1-1">div that should fill the height of the parent</div>
</div>
<div>div that will have height fit content</div>
</div>
Now my main problem is having the grand child div (.uk-height-1-1) to have its height fill the parent, how do I make its height fill the height of the parent div??
NOTE: The below links of questions I have been through them before, they do not answer my question
Fill remaining vertical space with CSS using display:flex
Make a div fill the height of the remaining screen space
UPDATE: Am using uikit, I posted the question initially the way it is to simplify the question, uk-height-1-1 = height: 100%
Best way to tackle something like this is assign borders to things when you are trying to see how the layout is
.viewport-height {
display: flex;
border: 1px solid blue;
height: 500px;
}
.flex-1 {
border: 1px solid red;
}
.full-height {
border: 1px solid greenyellow;
height: 100%;
}
If you look in the css above the .full-height is now the same height as the flex-1
If I understood your question, then this should be what you are looking for. Let me know if you need any additional help.
.viewport-height {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-1 {
display: flex;
flex: 1;
background-color: green;
align-items: center;
}
.div-with-height {
height: 50px;
}
full-height {
height: 100%;
}
<div class="viewport-height flex-column">
<!-- normal div with height 100vh and flexbox of flex column -->
<div class="div-with-height">div that will have height fit contents</div>
<div class="flex-1">
<!-- div that will fill the remaining space -->
<div class="full-height">div that should fill the height of the parent</div>
</div>
<div class="div-with-height">div that will have height fit content</div>
</div>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I want to resize flex-container by using percentage units like height: 10%, but it only fits to content's height. If i try using px, it works, but i definitely need percentages.
.top_section {
display: flex;
height: 10%;
background-color: #8ac858;
}
<div class="top_section">
<div class="nav menu">
Home
Rating
Map
</div>
<div class="auth_menu">
Register
Login
<input type="text" class="login">
<input type="password" class="password">
</div>
</div>
What should i do in this case?
.top_section has height: 10%. So .top_section's height will be 10% of its parent. So then you need to set the height of its parent element.
For example, if its parent is body, then you can have
body: {
height: 100vh;
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Height equal to dynamic width (CSS fluid layout) [duplicate]
(9 answers)
Responsively change div size keeping aspect ratio [duplicate]
(5 answers)
Closed 4 years ago.
I don't know how but I've been at this for hours and can't figure it out.
I'm trying to make a div have a fixed aspect ratio of 1:1, but the padding-top trick just isn't working.
Here is my code:
HTML:
<div class="test">
<div/><div/><div/><div/>
</div>
CSS:
.test {
width: 50px;
height: 0px;
padding-top: 100%;
background: blue;
}
Can anyone figure what I am doing wrong?
JSFiddle link: http://jsfiddle.net/ajpgbc0L/
Expected result: http://jsfiddle.net/ajpgbc0L/2/
EDIT: I should have made it clear that the width could be anything
Adding a wrapper element around it with a set width will allow you to achieve the desired result:
<div class="test__outer">
<div class="test">
<div/><div/><div/><div/>
</div>
</div>
css:
.test {
height: 0px;
padding-top: 100%;
background: blue;
}
.test__outer {
width: 50px;
}
This is because precent padding is calculated, based on the width of the containing block, not the block you are setting padding on:
https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Values