Menu
Flexbox column container inside another flex container doesn't get 100% height in Chrome, but in Firefox and Edge all ok.
Codepen example
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
868
Getting the child of a flex-item to fill height 100%Set position: relative; on the parent of the child. Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
By default, a flex container has the following width and height assigned. width: auto; height: auto; But you can set a fixed height and width to the flex container.
Fixed size If you remove the 100% width above, then the image should retain its normal size even when the available space is reduced. However, if you want to keep the 100% img for any reason, then you need to add the flex-shrink property to the element containing the image and give it a value of 0.
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
You're missing a height: 100% on a parent element: <header>
Once you add that in, the layout works in Chrome, as well.
header {
min-height: 100%;
width: 100%;
height: 100%; /* NEW */
}
Revised Codepen
When using percentage heights, Chrome requires that each parent element have a defined height. More details here:
height property and percentage valuesWhen using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
