How can I prevent this flex parent from shrinking to smaller than the height of the children? The grey container is the flex parent, the white boxes are the children.
grey box
display flex
white boxes
display block
height 200px
I discovered the problem; it was caused by a css reset with the rule:
body, html { height: 100%; }
The problem disappeared once I changed this to:
body { height:auto; min-height:100%; }
html { height: 100%; }
I found what may be the real answer. This solved it for me:
At least one of the children of a "display: flex" parent MUST have the attribute "flex: [some number]". In my scenario, once I set flex to 1 for my child, suddenly the other child stopped its odd shrinking.
Trivial answer: add min-height: 200px on the grey box (the container).
(Though: if you're not providing a height for the grey box (the flex container), it should already auto-size to fit its children's height -- though that depends on the context, e.g. if the flex container's parent is another flex container. Anyway, you'll probably have to provide more specifics & a working testcase, if you want a more appropriate answer. :))
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I added a min-height on a div in a flex layout parent. It seems that the min-height impacts the div if its real height is greater than min-height.
Take below code as an example:
https://codepen.io/zhaoyi0113/pen/ejwJGM
I set 100px as min-height on the div but it gets overlay each other if its real height is greater than 100. In above case, I expect the div shows hello world in one block but it doesn't. If you inspect the dom structure you will find that the <p> doesn't extend its parent div height. How can I fix it?
Since you've set height 200px on the .div1 flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px.
Depending on what you want to achieve you might want to change the height on the .div1 or add flex-shrink: 0 on .div2
try changing the height of the paragraph to inherit.
p {
height: inherit;
}
this will make it inherit the height from its parent.
see the result here
Alternative solution is to add display: table; to your div2.
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 5 years ago.
I have a flexbox with a direct child that is declared with align-items: stretch.
Inside this flexbox's direct child, I would like to have a div container that also uses its parent's full height (by setting height: 100%).
However, the div container won't stretch to 100% height of its parent, unless I also set height: 100% on the flexbox's direct child.
Is it kind of bug? Must I set the flexbox's direct child with align-items: stretch AND height: 100% to achieve what I want? It seem redundant to me.
Here is an example:
html,
body {
margin: 0;
height: 100%;
}
.flexbox {
display: flex;
flex-direction: row;
height: 100%;
background-color: green;
}
.flexbox-child {
// height: 100%; uncommenting this will get it to work
align-items: stretch;
background-color: blue;
}
.flexbox-grand-child {
height: 100%;
background-color: red;
}
<div class="flexbox">
<div class="flexbox-child">
<div class="flexbox-grand-child">
I want to be stretched till the bottom
</div>
</div>
</div>
http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview
Thanks!
It's a complicated case.
Your .flexbox-child is only a flex item, but not a flex container. Therefore, align-items: stretch, which only applies to flex containers, is ignored.
Then, .flexbox-grand-child has a percentage height, which behaves like this:
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'.
The containing block is the flex item (.flexbox-child), which has no explicit height, and its height seems to depend on the content.
However, this dependency is only due to the new min-height: auto. But before taking min-height into account, the height of the flex item will be (due to the initial align-self: stretch) the height of the container, which is specified explicitly, ignoring the content.
Then, Firefox considers that the height of .flexbox-child does not depend on its contents, so height percentages in its children should work. And then your code works.
However, Chrome doesn't think so.
I'm not sure which one does it right. It doesn't help that height is only defined in the old CSS2.1 and in CSS basic box model, which is an inconsistent draft.
To be safe, better set the height of .flexbox-child explicitly. Or make it a flex container.
When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
Simply apply display: flex to the flex item, which converts it into a flex container, as well. Then default flex properties like align-items: stretch will apply to the children (now flex items).
You wrote:
I would like to have a div container that also uses its parent's full
height...
You don't need to use height: 100% or add align-items: stretch (it's a default rule). Simply add display: flex to .flexbox-child, and .flexbox-grand-child will expand the full available height.
Modified demo: http://plnkr.co/edit/n0Wt3x3CUr1ZfBD2RrGo?p=preview
re: height: 100% possible bug
With regard to the need to specify height: 100% on child elements, I don't see any bug here. Everything seems to conform to the spec. Here's a complete explanation: Working with the CSS height property and percentage values
I have two divs with fixed width placed next to each other in a parent div. I want to prevent the two divs to be placed under another if the parents' width becomes smaller than the childrens combinded width. They should stay next to each other, and overflow the parent.
See this fiddle
As you can see I want the two children to overlap with relative positioning. This leaves a lot of blank space in the parent that I want to eliminate.
Because I want the height of the parent to adapt to the tallest child (assume that the height changes and is not fix) I can not use float or position: absolute; which makes it tricky.
I am out of ideas. Any suggestions?
I would like the solution to include at least IE8.
If I understand the question correctly, just add the property "white-space: nowrap;" to the parent element.
See this fiddle: http://jsfiddle.net/qk0qrj54/2/
#parent {
background-color: yellow;
width: 380px;
white-space: nowrap;
}
I am trying to get an<img> to resize dynamically. Sometimes I need that image to go beyond the box it is bound by, but it seems to stop and distort. Can this be done?
<div>
<img src='smjpg.jpg' />
</div>
div{
width: 20px;
}
img{
width: 100px;
}
Just use CSS for the bounding div.
#imgDiv {
overflow:visible;
}
If you still want the parent container to grow for other elements, with no fixed size, then consider using the float property or position: absolute on the child element. Absolute positioning removes the child from the flow of the page, so the parent container will see nothing to expand around. Floating has a similar visual effect, provided overflow is visible and no clearfix is used, but the child does affect the layout of its siblings. Here's a demo: http://jsfiddle.net/lpd_/rd4HP/3/ (try adjusting the result width).