角度材料嵌套列高度计算

Question

更新

似乎预期的行为发生在最新的Firefox和Edge中 - 这可能是Chrome独有的问题（不敢相信我输入了...

下面是说明该问题的代码笔。这是代码：

.HTML

<div class="thingone" layout="column" flex="100" layout-fill>
    <div class="thingtwo" layout="column" flex="75">
      <div class="thingfour" layout="column" flex="25"></div>
      <div class="thingfive" layout="column" flex="75"></div>
    </div>
    <div class="thingthree" layout="column" flex="25"></div>  
</div>

.CSS

.thingone {
  background-color: red;
}
.thingtwo {
  background-color: blue;
  border: 10px solid black;
}
.thingthree {
  background-color: green;
  border: 10px solid white;
}
.thingfour {
  background-color: yellow;
}
.thingfive {
  background-color: orange;
}

我的最终目标是看到总共三个条形 - 前两个包裹在一个占据父项可用面积 75% 的条形中，最后一个仅占用父项可用面积的 25%。前两个条形应分别占其父条面积的 25% 和 75%。

正如您从代码笔中看到的那样，我很接近，但子列不尊重其 25% 和 75% 的弹性分配。举一个简单的例子，我正在努力理解为什么。

理想情况下，我想要一个不涉及行的解决方案（因为此示例建模的真实 UI 需要列），除非列嵌套在行中。

也许更重要的是 - 有什么简单的方法来解释这里发生的事情？在 flex 中处理嵌套列时，是否有必须应用的"规则"（例如始终为父元素提供显式高度分配）？

谢谢！

Answer 1

该问题的解决方案是在尝试让元素填充可用的垂直空间时，不要在"thingtwo"元素上使用"layout-fill"属性。"layout-fill"除了指定似乎导致布局问题的高度属性之外，还指定了最小高度CSS属性。

这是那些偶然发现类似问题的人的解决方案：

.HTML

<div class="thingone" layout="column" flex="100">
    <div class="thingtwo" layout="column" flex="75">
      <div class="thingfour" layout="column" flex="25"></div>
      <div class="thingfive" layout="column" flex="75"></div>
    </div>
    <div class="thingthree" layout="column" flex="25"></div>  
</div>

.CSS

.thingone {
  background-color: red;
  height: 100%;
}
.thingtwo {
  background-color: blue;
  border: 10px solid black;
  height: 100%;
}
.thingthree {
  background-color: green;
  border: 10px solid white;
}
.thingfour {
  background-color: yellow;
}
.thingfive {
  background-color: orange;
}