Question

更新

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

Here是一个说明问题的代码。这是代码：

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％。

正如您从codepen中看到的那样，我很接近，但是子列并不尊重他们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;
}

角度材料嵌套柱高度计算

1 个答案: