Angular material 角材质垂直百分比空间

如何使一个div真正占用一定百分比的父空间？请参见下面的代码：

<div layout="column">
  <div id="div1" flex="70%"></div>
  <div id="div2" flex="30%"></div>
</div>

---

我想使div1的高度为父div的70%，div2的高度为父div的30%。但这不起作用。1区和2区坍塌。但是，如果父布局是row，它就可以正常工作——div1在水平方向上占用70%的空间。

如果查看布局文档 我认为这句话与你的问题有关

flex属性值限制为33、66和五的倍数

例如：flex=“5”、flex=“20”、flex=“33”、flex=“50”、flex=“66”、flex=“75”

---

所以我想如果你使用允许的值，你可以得到你需要的结果。例如，使用66和33

我认为您需要进行以下修改：

指定外部div的“高度”。可以是百分比或像素

不要在flex属性中使用%符号

请参阅此代码笔：

---

如果你读对了，你可能会注意到上面写着“…33、66和五的倍数”！因为70和30是5的倍数，这绝对不是问题所在。

<div layout="column" style="height: 100%;">
  <div id="div1" flex="70" style="background-color:red;"></div>
  <div id="div2" flex="30" style="background-color:blue;"></div>
</div>