Polymer 中的 flexbox 问题

Question

我必须说，我一直在努力理解 flex，并且我有一个我一直在 Polymer 中挣扎的特定问题，现在归结为最低限度。我有一些看起来像这样的东西：

<body fullbleed unresolved layout vertical>
    <div>
        <div vertical layout>
            <core-toolbar>
                <div>Help Me</div>
            </core-toolbar>
            <div horizontal layout>
                <div vertical layout flex>
                    <div style="background-color:red">
                        a
                    </div>
                    <div style="background-color:blue">
                        b
                    </div>
                </div>
                <div style="width:100px; background-color: yellow">
                    c
                </div>
            </div>
        </div>
    </div>
</body>

现在，核心工具栏占据了一些高度，我需要 "a" div 占据其余高度的 60%， "b" div 占用其余部分，"c" div 占用 "a" 和 "b" 的高度之和。我尝试了很多不同的组合，希望我最终能理解并掌握它，但我需要朝着正确的方向前进。有人可以帮忙吗？

谢谢 :-)

Answer 1

更新答案

将高度设置为 100%。
将 'flex' 添加到 div a 和 b。

link

代码

<body fullbleed unresolved>
  <div layout vertical style="height: 100%; width:100%;">
    <core-toolbar>
      <div>Help Me</div>
    </core-toolbar>
    <div horizontal layout flex>
      <div layout vertical flex>
        <div flex style="background-color:red">
          a
        </div>
        <div flex style="background-color:blue">
          b
        </div>
      </div>
      <div style="width: 100px; background-color: yellow">
        c
      </div>
    </div>
  </div>
</body>

Polymer 中的 flexbox 问题

Trouble with flexbox in Polymer

html

flexbox

polymer

更新答案

代码