Question

我有一个HTML

        <style>
            .container {
                display: flex;
                flex-direction: column;
                width: 400px;
                height: 400px;
                margin: 0 auto;
                border: solid 1px black;
            }
            .sub-container {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                //height: 100%;
                margin: 5px; 
                border: solid 1px yellow; 
            }
            .red-block {
                margin: 5px; 
                border: solid 1px red;
            }
            .green-block {
                flex-grow: 1;
                margin: 5px; 
                border: solid 1px green;
                overflow-y: auto;
            }
            .blue-block {
                margin: 5px; 
                border: solid 1px blue;
            }
        </style>

<div class="container">
    <div class="red-block">HEADER</div>

    <div class="sub-container" > <!-- Polymer module -->
        <!-- shady dom -->
        <div class="green-block">
            <div style="height: 500px;">CENTER</div>
        </div>
        <div class="blue-block">FOOTER</div>
    </div>
</div>

Example on Plunker

如您所见，内容位于主要区域（黑色边框）之外。如果我删除（黄色边框），那么结果就可以了。但是我使用Polymer.js，当我将dom-module添加到页面时，我得到了多余的div（子容器），这会破坏我的布局。

如何让子容器对布局不起作用？

Answer 1

使用flex-basis：0;使div适合容器内部。添加flex-basis：0;到.green-block类来获得预期的效果

http://plnkr.co/edit/Xj6fe8

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <style>
    .container {
      display: flex;
      flex-direction: column;
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: solid 1px black;
    }

    .sub-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      //height: 100%;
      margin: 5px;
      border: solid 1px yellow;
    }

    .red-block {
      margin: 5px;
      border: solid 1px red;
    }

    .green-block {
      flex-basis: 0;
      flex-grow: 1;
      margin: 5px;
      border: solid 1px green;
      overflow-y: auto;
    }

    .blue-block {
      margin: 5px;
      border: solid 1px blue;
    }

    .traitor {
      height: 500px;
    }
  </style>

  <div class="container">
    <div class="red-block">HEADER</div>

    <div class="sub-container">
      <!-- Polymer module -->
      <!-- shady dom -->
      <div class="green-block">
        <div class="traitor">CENTER</div>
      </div>
      <div class="blue-block">FOOTER</div>
    </div>
  </div>

</body>

</html>

评论这不是你要问的！

Answer 2

现在我开始工作了。需要添加到子容器：

height: 0px;
flex-grow: 1;

由于身高：0px;元素不会依赖于大儿童元素。 http://plnkr.co/edit/bbqsTJiguBXFlzySpLRu?p=preview

'display：flex'和'flex-grow：1'之间的分区打破了布局

2 个答案: