角度组件销毁其子元素的flexbox高度信息 [英] Angular component destroys flexbox height information for its child elements

问题描述

我有一个flexbox父容器，它的 flex-grow 给出了包含 div 元素的尽可能多的高度。这个 div 元素的子元素当然有 height：100％。这工作正常。

 < 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 > 
 <！ - 无论大小限于分配的空间的内容 - > 
< / div> 
 
< / div> 
< / div> 
  

但是，当我在parentContainer和contentContainer之间有一个角度组件时，就像这样：

 < 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 > 
 <！ - 无论大小限于分配的空间的内容 - > 
< / div> 
< / my-ng-component> 
< / div> 
< / div> 
  

角度组件将高度重置为0px，因此contentContainer也以0px高度结束。

如何修正角度组件以不破坏高度信息？

Plunk： http：// plnkr .co / edit / 0eai5HFZh7o2Vguzd5j6？p =预览

解决方案

通常， height：100 ％在 flex子的子上无法正常工作，主要原因是Flexbox 伸缩适合它的flex父级，但仍然将其高度解析为auto，如此处所示：

---

在你的情况下，当使用flex 列方向时，它是可能的。

code> flex-grow：1 将离开 flex-shrink 和 flex-basis 到它们的默认值， 1 和 auto ，这里是 auto 导致该问题。

通过将其更改为和h使用推荐的简写形式 flex ， flex：1 100％子女及其后代将有一个身高 100％ from。

注1，只需使用 flex：1 （与 flex：1 1 0 相同）也适用于Chrome / FF / Edge / IE11，但如果我没有错，Safari 10在 flex-basis 变为 0 。

$ b时遇到了一些问题$ b

更新的plnkr

使用以下更新后的代码片段

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> 
  

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

解决方案

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:

• Why height=100% doesn't work?

---

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>

这篇关于角度组件销毁其子元素的flexbox高度信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！