Question

描述性的plunker：http://plnkr.co/edit/remH1RtkY1qBk0A7J4Tp?p=preview

我有一个包含两个弹性项目的弹性箱容器（＆＃34;标题＆＃34;和＆＃34;内容＆＃34;）。内容div有一个我想要控制高度的子div。但无论我如何设置这个div的高度，高度都保持默认。

这里是标记/ 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使其在这个人为的例子中运行。虽然为什么会发生这种情况，以及如何以适当的方式处理它而不是找到解决方法，我会更好奇。

Answer 1

这似乎是一个错误或尚未实现的功能。弹性项目没有明确的大小（在这种情况下是高度），因此您无法解析孩子的百分比大小。

the docs州：

如果要针对弹性项目的主要大小解决百分比，并且弹性项目具有明确的弹性基础，则必须将主要大小视为确定以解决百分比，并且百分比必须针对弹性项目的弯曲主要大小...

我理解这一点的方式是＆＃34;正确的方式＆＃34;将定义一个明确的弹性基础。所以在你的例子flex:1 1;应该做的诀窍......但是，这是一个非常新的更改/错误修正，所以我希望很少没有浏览器支持（看起来它被添加到march 2014中的规范）。

我的建议是使用absolute position workaround。

另请参阅：https://code.google.com/p/chromium/issues/detail?id=428049和https://code.google.com/p/chromium/issues/detail?id=346275。

Answer 2

.content和.myContentItem的填充为您提供了不平等。

在padding:0;上设置.content，在padding-top:0;设置padding-bottom: 0;和.myContentItem。

.content{padding:0;}
.myContentItem{padding-top:0;padding-bottom:0;}

如何控制弹性项目的子div高度

2 个答案: