In my application I have a parent div and two other child divs inside this parent. One of these child div's has a set height while the other does not. I want to make the div who does not have a set height to be the same as the parent.
An illustration of what I am referring to can be seen in this jsfiddle: https://jsfiddle.net/ll3333/2Lxuj8wk/10/.
In this example, I want the div with class "child-2" to be the same height as the parent. For some reason, setting its height to "100%" does not seem to be working.
Thanks!
From the MDN on height:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
The 100% of the height property that you are setting is telling the element to take up 100% of the parent's height (and this chains all the way to the first absolutely-specified height). However, you never actually specify the height of the parent element itself.
To resolve this, you'll need to set a height of 300px on the parent. Note that this means that the other element could also make use of height: 100%, which would allow you to save on code (though this is not shown below).
.parent {
display: flex;
flex-direction: row;
border: 1px solid purple;
height: 300px;
}
.child-1 {
height: 300px;
background-color: blue;
width: 40px;
}
.child-2 {
height: 100%;
background-color: red;
width: 40px;
}
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
you can add align-items: stretch; for .parent and remove height: 100%; in .child-2
.parent {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid purple;
}
.child-1 {
height: 300px;
background-color: blue;
width: 40px;
}
.child-2 {
background-color: red;
width: 40px;
}
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
Related
.parent {
display: flex;
border: 1px solid black;
}
.first>input {
display: block;
width: 100%;
padding: 0;
}
<div class="parent">
<div class="first"><input type="text"></div>
<div class="second"><button>Button</button></div>
</div>
In this sample I'm doing something with the input's styles that will shrink its width as the .parent's width becomes smaller itself. However, it puzzles me why, as long as the .parent's width is more than enough, the .first>input brotherhood don't take up all the available space? There are no max-width set on them, so why should they freeze up in a flex container? What's the rules here?
flex-basis: auto looks up the main size of the element and defines the size. For example, on a horizontal flex container, auto will look for width and height if the container axis is vertical. If no size is specified, auto will fall back to content.
~ Flex Basis Property in Flexbox
So in your case, no size was specified on the flex container. Set the flex-basis on the parent of the element you are trying to grow. In your case, it would be .first.
.parent {
display: flex;
align-items: center;
border: 1px solid black;
}
.first>input {
display: block;
width: 100%;
padding: 0;
}
.first {
flex-basis: 100%;
}
<div class="parent">
<div class="first"><input type="text"></div>
<div class="second"><button>Button</button></div>
</div>
Setup
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}
<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>
Notice that the blue bar reaches the full height of the container, minus the padding.
If I add height: 100% to the .bar class however, the height disappears.
.bar {
position: relative;
width: 5px;
background-color: blue;
height: 100%;
}
Question
I imagine that actually setting height to 100% confuses the browser because the parent doesn't actually have a height that is set, but what property pre-setting-height-to-100% allows the height to then be 100%? And, given that this is actually my goal, would it be "correct" to just not specify 100%, or is there a better way to ensure the .bar element reaches the full height?
This is due to the stretch default alignment applied to flexbox container that make all the element stretched to fit their parent height.
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}
<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>
If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. ref
If you change the alignment this will no more happen
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
align-items:flex-start;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}
<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>
And if you set any value of height, the size will no more be auto considering the above specification so the stretch will no more apply and you will fall into the issue of percentage height that will make the height fall to auto because the parent height is not explicitely set.
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. ref
I am trying to set the width of a div element to the width of it's longest child element, which in this case happens to be a div that I want locked to the bottom of the parent div. I am also not using a fixed height for the parent, because I do not know how big the children will need to be
Here is my html/css:
HTML:
<div id ="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
CSS:
#header-right{
background-color: red;
position: relative;
display: inline-block;
height: 300px; /*The actual width is unknown, this is just for example*/
}
#content1{
background-color: blue;
width: 200px;
height: 100px;
}
#footer{
background-color: cyan;
position: absolute;
bottom: 0;
width: 300px; /*Also an unknown value*/
height: 25px;
}
You can have a look at this jfiddle to see what happens:
https://jsfiddle.net/rkdqp9m5/2/
You can see the container div ignores the footer, since it is absolutely positioned.
However, if I do not use absolute positioning for the footer, then I cannot lock the footer to the bottom of the div, as you can see in this jfiddle
https://jsfiddle.net/rkdqp9m5/3/
I want to lock the footer to the bottom of the container, but I also want the parent's width to be based off the footer. I do not want to use tables for this, and I do not wan to used fixed widths or heights, as the container's and the footer's dimensions will be based off of images whose widths I do not know.
Edit: I would also like to keep this strictly in HTML/CSS, if possible
If you're OK with browser requirements of flexbox, you could do:
#header-right {
background-color: red;
padding: 20px 0px 0px 0px;
height: 300px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#content1 {
background-color: blue;
width: 200px;
height: 100px;
align-self: flex-start;
}
#footer {
background-color: cyan;
width: 300px;
height: 25px;
align-self: flex-end;
}
<div id="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
JSFIDDLE DEMO with all the necessary vendor prefixes.
Does this help: Relative parent DIV to inherit the width of absolute child DIV
What it suggests is that you can't use pure CSS, but you can use Javascript to achieve what you're trying to do.
I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows.
The upper child div is of variable height, but is guaranteed to be less than the height of the parent div.
The lower child div is also of variable height. In some cases, the heights of the child divs will make the lower child div exceed the parent. In this case, I need to make the lower div scrollable. Note that I want only the lower div to be scrollable, not the whole parent div.
How do I handle this?
See attached jsfiddle for case example: http://jsfiddle.net/0yxnaywu/5/
HTML:
<div class="parent">
<div class="child1">
hello world filler
</div>
<div class="child2">
this div should overflow and scroll down
</div>
</div>
CSS:
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
Because this post is still ranking very high in Google, I'd like to post a better solution using flexbox. Actually this is very simple.
Use display: flex, flex-direction: column and overflow: hidden for parent and overflow-y: auto for child.
.wrapper {
display: flex;
flex-direction: column;
overflow: hidden;
}
.scrollable-child {
overflow-y: auto;
}
Here's the pen:
https://codepen.io/pawelsas/pen/vdwjpj
Overflow only works when you give it a value to overflow when greater than. Your value is relative to how big the top is, so using jQuery, grab that value then subtract from the parent.
$(document).ready(function() {
$(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});
and add overflow's to the children
.child1 {
background-color: red;
overflow: hidden;
}
.child2 {
background-color: blue;
overflow: auto;
}
http://jsfiddle.net/m9goxrbk/
Use overflow property:
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
overflow: auto;
}
jsFiddle
EDIT:
if you want only second div to be scrollable, you need to change it height to 30px so child1 and child2 will exactly fit the parent height and add overflow property there:
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
height: 70px;
background-color: red;
}
.child2 {
height: 30px;
background-color: blue;
overflow: auto;
}
jsFiddle
I want to have a child fill the exactly entire flex box of a flex layout.
If I use the following HTML:
<div class="parent">
<div class="child1">
should have 100px height
</div>
<div class="child2">
<div class="intermediatechild2">
<div class="subchild2">should have 200px height and padding</div>
</div>
</div>
</div>
and apply the following css:
.parent {
display: flex;
flex-direction : column;
height: 300px;
width: 200px;
}
.child1 {
height: 100px;
background: #008800;
flex: 0 0 auto;
}
.child2 {
height: 100%;
background: #003300;
flex: 0 0 auto;
}
.subchild2 {
height : 100%;
background: #ff0000;
}
.intermediatechild2 {
padding: 20px;
height : 100%;
width : 100%;
box-sizing: border-box;
border: 2px solid blue;
}
I get an overflowing intermediatechild. The height 100% seems to be relative to .parent
A fiddle can be found here:
http://jsfiddle.net/8znFV/4/
I did not understand exactly what you want, but if what you want is only leave. Subchild2 100% and follow the father's height (intermediatechild2), you'll have to add the father's height (intermediatechild2) with px and remove the height. child2.
Recalling that, you have to count the padding in father's height (intermediatechild2), so if you want. Subchild2 has 200px in height, will have to leave her father (intermediatechild2) with 240px, leaving 20 padding-top and 20 padding-bottom height of more than 200.
A note, only work in chrome as your css code is nonstandard, if you want I can breastfeed him at another time =)
Hope it helps
Here's an example: http://zip.net/bsmZgF
Just Remove height:100% from .child2and it will work. this will give 100% height to child2 element so it's going outside of parent.
It should be auto adjusted that's the purpose of flexbox and 100% height is giving more height(same as parent) to child2.
I fixed the problem. The solution lies in staying "display:flex". Once you started flex layout, you seem not to be able to step back to "display:block" with "height:100%".
<div class="parent">
<div class="child1">
should have 100px height
</div>
<div class="child2">
<div class="intermediatechild2">
<div class="subchild2">should have 200px height including padding</div>
</div>
</div>
</div>
css:
.parent {
display: flex;
flex-direction : column;
height: 300px;
width: 200px;
}
.child1 {
height: 100px;
background: #008800;
}
.child2 {
background: #003300;
flex: 1;
display: flex;
}
.subchild2 {
background: #ff0000;
flex: 1;
}
.intermediatechild2 {
padding: 20px;
display : flex;
box-sizing: border-box;
border: 2px solid blue;
}
working fiddle : http://jsfiddle.net/8znFV/6/