Polymer中的flexbox出现问题

Question

I must say that I am constantly struggling trying to understand flex and I have a specific issue I have been strugglign with in Polymer, now boiled down to a bare minimum. 我必须说，我一直在努力理解flex，我在Polymer中遇到了一个特定的问题，而现在这个问题已降至最低限度。 I have something that looks like this: 我有这样的东西：

<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>

Now, the core-toolbar takes up some of the height, I need the "a" div to take up 60% of the rest of the height, the "b" div to take up the rest and the "c" div to take up the sum of the height of "a" and "b". 现在，核心工具栏占据了一些高度，我需要“ a” div承担其余高度的60％，“ b” div承担其余高度，“ c” div承担加上“ a”和“ b”的高度之和。 I have tried lots of different combinations hoping that I would eventually understand and master it, but I need a push in the right direction. 我尝试了很多不同的组合，希望最终能理解和掌握它，但是我需要朝着正确的方向发展。 Can anyone help? 有人可以帮忙吗？

Thanks :-) 谢谢：-）

Answer 1

Updated answer 更新的答案

Set the height to 100%. 将高度设置为100％。
Add 'flex' to div a & b. 在div a和b中添加“ flex”。

link 链接

Code 码

<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出现问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-28 12:47:17

Updated answer 更新的答案

Code 码

Polymer中的flexbox出现问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-28 12:47:17

Updated answer 更新的答案

Code 码

解决方案1
0 已采纳 2015-05-28 12:47:17