Not sure if this is a Flexbox issue or a browser issue (or both), as it behaves differently on each browser:

It seems to work as expected on FF.
It doesn't work on IE, but it does work if you add [layout] to <body>.
It doesn't work on Chrome, but it does work if you add an explicit height (even 0) on the outer div. This also makes it work on IE (without adding [layout] on <body>).
(Note that height is ignored on Chrome and IE, but not on FF.)

Looking for a cross-browser (i.e. latest Chrome, FF, IE) work-around:
Currently, [layout-fill] sets min-height: 100% but nothing for height, which is supposedly for allowing the element to grow beyond that height. Although this does theoretically sound reasonable, in practice I couldn't see any difference to the outer div's height neither with nor without an explicit height: 100% (tried on Chrome, FF, IE).
@ALL: Could it be a good idea to add a height style to [layout-fill] (at least on [layout="column"]) ?

@wlingke, since FF does pay attention to height, setting an explicit value of 100% for height on the outer element gets the inner element properly sized at 30% (while still having the outer element fill its parent). E.g.:

  <div class="outer" layout="column" layout-fill style="height:100%;">
    <span class="inner" flex="30"></span>
  </div>

Demo CodePen

If you want to apply this globally, you can add the following rule:

[layout-fill] {
  height: 100%;
}

NOTE: I couldn't find any unwanted side-effects on latest Chrome/FF/IE, but this might not be a full-proof solution across all supported browsers.
_{That said, I can't think of any usecase where setting height: 100% would be undesirable, but you never know...}

flex=number within layout-fill does not work #2954

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions