Html 当容器具有动态高度时，设置弹性项目的百分比高度

我有一个包含2个div元素的简单包装器

我希望第一个增加85%的高度，第二个只增加15%的高度

当我给包装设定一个固定的高度时，它就起作用了。虽然遗憾的是，我的包装有一个动态的高度

你知道我怎样才能做到这一点吗

我还提供了一个plunker：

代码：

.outer{
弹性：1；
显示器：flex；
弯曲方向：立柱；
弹性基准：0；
/*如果我设置了固定高度，一切都会正常
虽然我想要一个动态的高度
高度：800px*/
}
梅因先生{
背景颜色：蓝色；
显示器：flex；
弹性：0.85%；
最大高度：85%；
弯曲方向：行；
高度：400px；
}
.领航员{
背景色：红色；
显示器：flex；
弹性：0.15%；
最高高度：15%；
弯曲方向：行；
高度：400px；
}

---

如果他们是body的直接子对象，那么您首先需要在patrents:

html

&

body

上设置

高度

，以获得可继承的值

然后不再需要

outer

，

body

已经存在

将

height

设置为最小值（最终设置为最小高度），并通过以下方式请求另一个进行增长：

flex:1


html，
身体{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
梅因先生{
弹性：1；
背景：番茄；
}
.领航员{
身高：15%；
最小高度：2米；
背景：石灰；
}

主要的
领航员
您可以尝试使用
flex grow
而不是
flex basis
或
height
来调整弹性项目的大小

在下面的示例中，一个flex项将占用容器中85%的可用空间。其他弹性项目将占剩余的15%

HTML（无更改）

CSS

.outer {
  display: flex;
  flex-direction: column;
}

.main {  flex-grow: 85; }
.navigator { flex-grow: 15; }  /* flex-grow: 1 would work as well */


了解更多关于flex heights的信息：
您可以在不使用flex的情况下进行初始（外部）布局，因为我看不到不需要它的地方

但是要求是一样的，
.outer
的父级需要一个继承或设置的高度


html，正文{
身高：100%；
保证金：0；
}
.外部{
身高：100%；
}
梅因先生{
背景颜色：蓝色；
身高：85%；
display:flex；/*这是给main的子对象的*/
弯曲方向：row；/*这是为main的子对象设置的*/
}
.领航员{
背景色：红色；
身高：15%；
display:flex；/*这是为nav的孩子们准备的*/
弯曲方向：row；/*这是为导航的孩子们准备的*/
}

必须有一种方法来确定链上父节点的高度。如果你做不到这一点，它将不起作用。你的包装从哪里得到它的高度等等？这都是一个动态的高度。所有这些都是用flexbox css完成的。我使用角材料设计。所以我想我必须在渲染时编写一个eventlistener，这样我才能指定元素的高度？问题是，如果包装高度（flex:1）可以由flexbox确定，那么它将起作用…如果您的链接没有完成…它将断开。等待显示高度是如何确定的上下文，我在flex叠层中举了一个例子，高度应该是可用的，或者类似于flex属性的东西：flex:85；&弹性：15；谢谢你的快速回答。可悲的是，他们不是肉体的孩子。这些是html结构中深层的元素（平铺）。。我不能用包装器来完成这项工作。@JuHwon那么，父对象是否有可以继承的已知大小。你能举个例子说明你的问题吗值需要一个引用来计算比率，在flex内，叠瓦高度应可用或类似flex:85；&弹性：15；