如何控制flex项的子div高度 [英] How to control child div height of a flex item
问题描述
描述性plunker： http://plnkr.co/edit/remH1RtkY1qBk0A7J4Tp?p=preview
Descriptive plunker: http://plnkr.co/edit/remH1RtkY1qBk0A7J4Tp?p=preview
我有一个包含两个flex项目（header和content）的flexbox容器。内容div有一个单独的子div，我想控制的高度。但是无论我如何设置这个div的高度，高度保持默认。
I have a flexbox container containing two flex items ("header" and "content"). The content div has a single child div that I want to control the height of. But no matter how I set the height of this div, the height stays default.
这里是markup / CSS：
Here's the markup / CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div { padding:15px; }
.container
{
background-color:gold;
height:500px;
display:flex;
flex-flow:column nowrap;
}
.header
{
background-color:pink;
/* no flex shrink/grow */
}
.content
{
background-color:aquamarine;
flex:1 1;/* allow filling space */
}
.myContentItem
{
background-color:khaki;
display:block;
height:50%;/* <-----------this is ignored */
}
</style>
</head>
<body>
<div class="container">
<div class="header">header<br />yo</div>
<div class="content">
<div class="myContentItem">I want this to be 50% the height of content div</div>
</div>
</div>
</body>
</html>
编辑：我知道我可以使用 display：absolute 使它在这个设计的例子中工作。我更好奇，但为什么发生这种情况，以及如何以正确的方式处理它，而不是找到解决方法。
edit: I am aware that I could use display:absolute to make it work in this contrived example. I'm more curious though why this happens, and how to deal with it in a proper way instead of finding a workaround.
推荐答案
这似乎是一个错误或尚未实现的功能。 flex项目没有确定的大小（在这种情况下为height），因此您无法解析子项上的百分比大小。
This would appear to be a bug or not-yet implemented feature. The flex item has no definite size (height in this case), so you cannot resolve a percentage size on the child.
文档状态：
如果要根据flex项目的主要大小解析百分比，并且flex项目具有明确的灵活性基础，则必须将主要大小视为定义，以解决百分比，而百分比必须解析flex项目的主要尺寸...
If a percentage is going to be resolved against a flex item’s main size, and the flex item has a definite flex basis, the main size must be treated as definite for the purpose of resolving the percentage, and the percentage must resolve against the flexed main size of the flex item...
我理解的方式是，正确的方式一个明确的灵活基础。所以在你的例子 flex：1 1; 应该做的技巧...但是，这是一个非常新的更改/ bugfix所以我期望很少甚至没有浏览器支持喜欢它已添加到 2014年3月的规范）。
The way I understand this is that the "proper way" would be to define a definite flex basis. So in your example flex:1 1; should do the trick... however, this is a very recent change/bugfix so I would expect little to no browser support (looks like it was added to the spec in march 2014).
我的建议是使用绝对位置解决方法。
另请参阅： https://code.google.com/p/chromium/issues/detail?id=428049 和 https://code.google.com/p/chromium/issues/detail?id=346275 。
这篇关于如何控制flex项的子div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
