Why does flexbox only cap child height in chrome?

Question

I have this HTML:

<div class="parent">
    <div class="child1">
        child1
    </div>
    <div class="child2">
        <div class="child3" style="height: 100px;">
            child3
        </div>
    </div>
</div>

and this css:

.parent {
  height: 200px;
  width: 200px;
  display:flex;
  flex-direction: column;
}
.child1 {
  height: 40px;
  flex: none;
}
.child2 {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

child3 represents a self contained element that has a variable height.

As its height increase, I want it to stretch child2 height, but not go past parent's height, which is the parent flex container.

I have set a known height to parent here to simplify the problem, but it self depends on the rest of the page layout.

Why does it works on chrome but not IE or firefox?

illustration of the problem once child3 has grown past parent's height:

Illustration of the correct behaviour I see in chrome dev tools:

Here is the fiddle with colors to help see the problem (click the button a few times): https://jsfiddle.net/xa4tu4sr/8/

I need child3 computed height to be capped, meaning it should scroll or just have its overflow hidden.

I do not recognize this as a bug in https://github.com/philipwalton/flexbugs

Maybe it's just a flesh wound!

possibly related: [Heights rendering differently in Chrome and Firefox](http://stackoverflow.com/a/35537510/3597276) — Michael Benjamin, Mar 02 '16 at 14:52

goncalopinto · Answer 1 · 2016-03-02T10:56:43.843

1

You can use padding in the parent to "correct" that, or set a background color for the parent. That works for me.

Based on what you added to your post, you will need to check the size of your DIV before increasing it, for this you can do something similar to this on your java file:

var counter = 10;
var div = document.querySelector('.child3');

window.increaseHeight = function (){
  if (counter<15) div.style.height = ++counter * 10 + "px";
}

You can compare the actual size of the DIV instead, or any other way you find adequate to solve your issue, but the bottom line is that you will need to check the size of your DIV before changing it's size, and that will prevent compatibility issues.

edited Mar 02 '16 at 10:56

answered Mar 02 '16 at 08:49

goncalopinto

433
2
8

maybe a fiddle and explanation would help the OP understand where come the mistake (height or box grown from its content ? ) https://jsfiddle.net/xa4tu4sr/10/ beside does he want clipping or overflow ? – G-Cyrillus Mar 02 '16 at 09:36
Thanks for adding that, this helps a bit more. ;) – goncalopinto Mar 02 '16 at 10:18
Sadly I am making a self contained element (represented here as child3) that could be used in any context. This flexbox context is one of them. So child3 should really just try to extend its height on its own, being constrained by flexbox. It cannot know about its parents. – Michael Dawkins Mar 02 '16 at 12:57

score 0 · Answer 2 · answered Mar 03 '16 at 08:46

I have found the solution

Here is the updated fiddle: https://jsfiddle.net/xa4tu4sr/11/

.parent {
    overflow: hidden;
}

.child2 {
    overflow: hidden;
}

overflow: hidden; needs to be present on all the parent chain.

Contrary to what I thought, the result then is not that child3 overflow will be hidden, it's own height is now capped so it does cannot overflow.

It means that the internal layout of child 3 is now correct, since its computed height does not go beyond visible space. Otherwise, a div that would be defined to be at the bottom of child3 would be clipped for example.

Why does flexbox only cap child height in chrome?

2 Answers2