1

I have a flexbox parent container whose flex-grow gives my containing div element as much height as is available. The children of this div element of course have height:100%. This works fine. 

<div style="display:flex; flex-direction:column;">
   <div style="flex-grow:1;background:green;"  id="parentContainer">

      <div style="height:100%;overflow:auto;background:red;"   id="contentContainer">
         <!-- content of whatever size confined to space allocated -->
      </div>

   </div>
</div>

But when I have an angular component in-between the parentContainer and contentContainer like so:

<div style="display:flex; flex-direction:column;">
   <div style="flex-grow:1;background:green;"  id="parentContainer">
    <my-ng-component style="height:100%; display:block; background:blue;">
      <div style="height:100%;overflow:auto;background:red;"   id="contentContainer">
         <!-- content of whatever size confined to space allocated -->
      </div>
    </my-ng-component>
   </div>
</div>

The angular component resets the height to 0px, so the contentContainer ends up with 0px height as well.

How do I fix the angular component to not destroy the height information?

Plunk: http://plnkr.co/edit/0eai5HFZh7o2Vguzd5j6?p=preview

Asons
  • 84,923
  • 12
  • 110
  • 165
Ron Newcomb
  • 2,886
  • 21
  • 24

1 Answers1

3

Generally, height: 100% doesn't work properly on child of a flex child, and the main reason is that Flexbox stretch to fit its flex parent but still resolve its height to auto, as shown here in this answer:

In your case though, when using flex column direction, it is possible.

The now used flex-grow: 1 will leave the flex-shrink and flex-basis to their default, 1 and auto, and here it is the auto that cause the issue.

By changing it to, and here using the recommended shorthand flex, flex: 1 100% the child and its descendants will have a height to pick up their 100% from.

Note 1, simply using flex: 1 (same as flex: 1 1 0) works too on Chrome/FF/Edge/IE11, but if I'm not wrong, Safari 10 had some issues when flex-basis becomes 0.

Updated plnkr

With the following updated code fragments

app.component.html

<div style="display:flex;flex-direction:column;height:324px;">
<div style="flex:1 100%;  background:black;  color: white;">
  foo
  <app-list style="height:100%;display:block; background:blue;"></app-list>
</div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165