Height is not correct in flexbox items in Chrome
You could absolutely position div id="half_of_content".
#content {
flex: 1;
height: 100%;
background-color: green;
position: relative; /* new */
}
#half_of_content {
height: 50%;
background-color: yellow;
position: absolute; /* new */
width: 100%; /* new */
}
DEMO
With regard to your statement:
But it seems like if Chrome treats it like half of the whole page
rather than the flex item.
You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.
With absolute positioning, however, you don't need to specify parent heights.
Flex height not working in Chrome
Add height: 100% to the parent of the orange div:
<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space.
and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div).
this works on all other browsers.
</div>
</div>
Essentially, Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height. For more details see bullet point #3 in this answer: https://stackoverflow.com/a/35051529/3597276
Flexbox Height broken in Chrome
Per request of an answer:
You can set the height of the image to auto.
.l-post-content figure .kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: auto;
}
It looks like Chrome is setting the container height to 0. So, if you have your image height set to 100%, that means 100% of it's container height - which is 0.
Setting the height: auto will set the height in relation to the image itself. This will also solve your stretching issue.
flexbox with height: 100% doesn't work on chrome 72+
On chrome 72+ you need to set min-height on .holder. This is not required on versions before 72.
html, body { height: 100%; margin: 0;}
.flex { height: 100%; display: flex; flex-direction: column;}
.body { height: 100%;}
nav { overflow: hidden; flex-shrink: 0; display: flex; flex-direction: row;}
.holder { display: flex; flex-direction: column; height: initial !important; flex: 1; min-height: 0;}
.wrapper {
flex: 1; display: flex; min-height: 0; overflow-y: auto;}<div class="body"> <div class="flex"><!----> <nav style="height: 40px; background-color: blue"></nav> <!----> <div class="holder body"> <div class="wrapper"> <div> <div class="holder">
<div> <br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v </div> </div>
</div>
</div> <div> <div style="height: 60px; background-color: red"></div> </div> </div> </div></div>Image height inside flexbox not working in Chrome
There are two problems you need to overcome:
Firefox solves them both on its own, but Chrome needs assistance.
Problem #1
The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.
Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).
#flex-container { height: 300px; width: 500px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: 5px solid black;}#container1, #container2 { height: 100px; width: 300px; background: orange; flex: 1 0 auto;}img { min-height: 0; } /* NEW */<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="Sample Image">
<div id="container2">300x100 px</div>
</div>Flex column and max-height bug in Google Chrome
It appears that this occurs when using flex and percentages on img tags simply changing % to pixels resolved the issue:
max-height: 100px;
span{ background:#4b0;}.Flx { display: flex; flex:1;}.Child { display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #aaa;}.Wrap{ align-items: center; justify-content: center; background:#00d;}.Wrap img { max-height: 100px; max-width:100%; background-color: #fb4a4a;}<div class="Flx"> <div class="Child"> <span>TEXT</span> <div class="Flx Wrap"> <img src="https://i.stack.imgur.com/440u9.png"> </div> </div></div>Chrome / Safari not filling 100% height of flex parent
Solution
Use nested flex containers.
Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through.
Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent.
Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation).
Try this (no changes to HTML):
.container { display: flex; flex-direction: column; height: 20em; border: 5px solid black}
.item { display: flex; /* new; nested flex container */ flex: 1; border-bottom: 1px solid white;}
.item-inner { display: flex; /* new; nested flex container */ flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */ /* width: 100%; <-- remove; unnecessary */ /* display: table; <-- remove; unnecessary */ }
a { display: flex; /* new; nested flex container */ flex: 1; /* new */ align-items: center; /* new; vertically center text */ background: orange;
/* display: table-cell; <-- remove; unnecessary */ /* vertical-align: middle; <-- remove; unnecessary */}<div class="container"> <div class="item"> <div class="item-inner"> <a>Button</a> </div> </div>
<div class="item"> <div class="item-inner"> <a>Button</a> </div> </div>
<div class="item"> <div class="item-inner"> <a>Button</a> </div> </div></div>css, height of nested flexbox not correct in Chrome
a colleague found the solution in this codepen
http://codepen.io/JosephSilber/pen/HqgAz
The problem was that I had an extra 'div' for each sub container. The solution is to mark the flex item as a new container by setting display: flex.
I have fixed my jsfiddler example
http://jsfiddle.net/jkristia/bL4pyg4b/4/
html, body { background-color: wheat; width: 100%; height: 100%; padding: 0; margin: 0;}
.titlebar { height: 40px; background-color: #ec7fed; display: flex; flex-direction: row;}
.titlebar .left { border: dashed; border-color: white; border-width: 1px; background-color: #78c6f3; /* below is to vertically center the text. Set the line height to height of parent element - any padding */ line-height: calc(40px - (5px + 5px)); padding: 5px; margin-left: 10px; margin-right: 10px; }
.titlebar .center { background-color: lightgreen; text-align: center; /* flexgrow allows for the box to take the remaining space in the flax container*/ flex-grow: 1; }
.titlebar .right { background-color: lightblue; margin: 10px; }
.flexContainer { position: absolute; width: 100%; height: calc(100% - 40px); background-color: #d58d28; flex-direction: column; display: flex;}
.flexRow { flex: 1; display: flex; margin: 5px; flex-direction: row; background-color: lightgray; width: calc(100% - 10px); height: calc(100% - 10px);
margin:5px; border: dashed; border-color: white; border-width: 1px;}
/* apply the following to all immediate children of .flexRow*/.flexRow > * { margin: 4px; text-align: center; border: dashed; border-color: white; border-width:1px;}.left { flex: 0 200px; background-color: #78c6f3;}.center { flex: 1; display: flex; width: 100%; flex-direction: column; background-color: #86dcc2;}.right { flex: 0 100px; background-color: #9fe1fa}
.center > * { margin: 4px; text-align: center; border: solid; border-color: darkgrey; border-width: 1px;}.center-top { flex: 0 40px; flex-grow: 0; flex-shrink: 0; background-color: #00ff90; overflow:hidden;}.center-bottom { flex-grow: 1; flex-shrink: 1; background-color: #cbcc80; overflow: auto; display: flex;}
.footer { background-color: #cbce83; border: solid; font-size:12px; text-align:right; border-color: darkgray; border-width: 1px; margin: 0px; padding: 0px; /* for static height set both grow and shrink */ flex-grow: 0; flex-shrink: 0; height:30px;}<div> <!-- header outside flex box --> <header class="titlebar"> <div class="left"> This is the left box </div> <div class="center"> This text is centered in the middle box </div> <div class="right"> Right box </div> </header> <!-- flex box --> <section class="flexContainer">
<!-- row using inner flex box --> <div class="flexRow"> <div class="left"> left </div> <div class="center"> <div class="center-top"> center of this div. <br />top </div> <div class="center-bottom"> bottom </div> </div> <div class="right"> right </div> </div>
<div class="footer"> row 3, this is the footer </div>
</section>
</div>Related Topics
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative
HTML5 Video Safari Downloads Full Before Playing
Change Color of Text Responding to Background Color
Picture (Source) Element Vs Img Srcset Attribute
Inline Svg Vs Svg File Performance
<Input Type="File"> Limit Selectable Files by Extensions
How to Anti-Alias Clip() Edges in HTML5 Canvas Under Chrome Windows
Setting The Height of a Select in Ie
How to Add Padding to Select Options via CSS
Freezing/Fixing The Top Header Row of a Table
Can't Get The Complete Address While Uploading a File
What Are All The Differences Between Src and Data-Src Attributes
How to Make a Fixed Column in CSS Using CSS Grid Layout
Rendering a Hierarchy of "Option"S in a "Select" Tag