Div 在 'display: flex' 和 'flex-grow: 1' 之间破坏布局

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-模块添加到页面时，我得到了多余的 div（子容器），这破坏了我的布局。

如何让子容器不影响布局？

Answer 1

使用弹性基础：0； div 强制装入容器内。添加弹性基础：0； .green-block class 以获得所需的效果

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

Div 在 'display: flex' 和 'flex-grow: 1' 之间破坏布局

Div between 'display: flex' and 'flex-grow: 1' breaks layout

css

flexbox

polymer-1.0