1

Can anyone suggest why Chrome does not seem to correctly work out the hight when using the following simplified Flexbox code?

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div style="width: 100%; flex: 1 0 auto; background: red">
      <div style="display: flex; flex-direction: row; width: 100%; height: 100%; background: gray">
        <div style="height: 100%; flex: 1 0 auto">
          <div style="width: 100%; height: 100%; background: orange">
            boop
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What is happening can be seen in the image:chrome sizing strangely

Can anyone think of a fix? I have a small framework that uses Tables underneath for layout. I am finally in the process of upgrading it to use Flexbox but I cannot seem to quite get nested flexboxes working correctly on all browsers.

Edit: So if I add another "boop" div as a child to the flexbox container, the following is what I want (from firefox and IE).

What I need

If I set the height to 100%, then it screws up the height for other sibling divs.

What I get if height:100%

Karsten Pedersen
  • 419
  • 4
  • 11
  • remove `flex-direction: column;` from the second div OR add `height:100%` to the third one – Temani Afif Apr 20 '18 at 14:29
  • The problem is that I want items in the second div to stack under one another and if we set height:100% to any of the divs inside the second div then they wont correctly share the remaining space. So unfortunately neither of those suggestions seem to be an option for this – Karsten Pedersen Apr 20 '18 at 14:45
  • 1
    I believe _only_ Chrome computes the height correctly. The first div is set to take 100% of the height of its parent. But its parent is `body`, and it contains only one word (boop), so its height is one word. I'm more surprised that the other browsers fill the whole page for no apparent reason. – Jeremy Thille Apr 20 '18 at 14:48
  • Fair enough. So how would I force a standard browser to fill the parent space? (I'm adding some images to help explain). – Karsten Pedersen Apr 20 '18 at 14:51
  • Urgh, so baffled. I thought I was understanding this stuff haha. So if I set the basis to 0 on the red div (i.e flex: 1 0 0)... it works just like firefox and IE. Any ideas why this is the case? – Karsten Pedersen Apr 20 '18 at 15:13
  • Two minor changes and it works across all browsers: https://jsfiddle.net/ds3ujxzd/ – Michael Benjamin Apr 20 '18 at 15:23
  • Problem explained in the dupe. I used Solution #4 from accepted answer. – Michael Benjamin Apr 20 '18 at 15:25
  • Many thanks but we are not quite there yet. I have modified your fiddle: https://jsfiddle.net/g79t6vey/ Is it possible to get the orange filling the gray *and* have both divs under one another? – Karsten Pedersen Apr 20 '18 at 15:38
  • Currently, in my fiddle: replacing line 33 with: "flex: 1 0 0px;" fixes it on Chrome. I am just trying to find out why :S Currently: I think I was running into this: https://github.com/philipwalton/flexbugs/issues/197 And the same solution seems to work for me. – Karsten Pedersen Apr 20 '18 at 15:40
  • Yes. Instead of using `flex: 1 0 auto`, use `flex: 1 0 0px` (same as `flex: 1`) https://jsfiddle.net/g79t6vey/2/ – Michael Benjamin Apr 20 '18 at 16:11
  • [*The difference between `flex-basis: auto` and `flex-basis: 0`.*](https://stackoverflow.com/q/43520932/3597276) – Michael Benjamin Apr 20 '18 at 16:13
  • Also, make sure you add @username to your comments, otherwise the user doesn't receive notification that you posted a message. I just happened to stumble back to your post. – Michael Benjamin Apr 20 '18 at 16:19
  • @Michael_B Many thanks. Though I am still seeing a few issues. There is quite a bad side effect with using a basis of 0px in that when the box resizes smaller than the content, some very strange overlapping is occurring so I don't feel this is a correct solution for this. I have put together an actual jfiddle to demonstrate the general problem. https://jsfiddle.net/uhgu6w53/ I hope it isnt too much to ask but can you have a play with this to see what you would do to make sure (i.e the orange box) correctly expands when nested in complex ways – Karsten Pedersen Apr 20 '18 at 16:46
  • Oops, I forgot to mention. The jfiddle example (https://jsfiddle.net/uhgu6w53/) is fine with other browsers. Just Chrome seems to not resize the orange div and instead fall back to its contained content height. – Karsten Pedersen Apr 20 '18 at 16:53
  • 1
    https://jsfiddle.net/uhgu6w53/1/ – Michael Benjamin Apr 20 '18 at 16:54
  • Ah fantastic! Thanks!. Though your changes are very interesting. I thought display: flex was only needed if you were going to put immediate children in the div that had flex: x or some other flex related property. Also, why do we want to remove height: 100% from flex-row but not for flex-column? – Karsten Pedersen Apr 20 '18 at 16:59
  • `height: 100%` in a row-direction container overrides the default setting `align-items: stretch`, which can only work if the child's height computes to `auto`. More complete explanation here: https://stackoverflow.com/q/44878379/3597276 – Michael Benjamin Apr 22 '18 at 23:49

0 Answers0