Невозможно обосновать элементы внутри coretoolbar

Question

Я пытаюсь оправдать некоторые элементы внутри core-toolbar, но я не могу заставить его работать.

вот мой код:

<template> 
    <style>  
     :host { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     box-sizing: border-box; 
     } 
     #core_card { 
     position: absolute; 
     width: 300px; 
     height: 300px; 
     border-top-left-radius: 2px; 
     border-top-right-radius: 2px; 
     border-bottom-right-radius: 2px; 
     border-bottom-left-radius: 2px; 
     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; 
     left: 440px; 
     top: 90px; 
     background-color: rgb(255, 255, 255); 
     } 
     #core_toolbar { 
     right: 0px; 
     color: rgb(255, 255, 255); 
     fill: rgb(255, 255, 255); 
     background-color: rgb(79, 125, 201); 
     } 
     #div { 
     display: block; 
     } 
     #core_icon_button { 
     display: block; 
     } 
    </style> 
    <core-card id="core_card" layout vertical> 
     <core-toolbar id="core_toolbar" horizontal layout justified> 
     <div id="div1">div 1</div> 
     <div id="div2">div 2</div> 
     <div id="div">Toolbar</div> 
     </core-toolbar> 
    </core-card> 
    </template> 

результат Код

Ожидаемый результат

Answer 1

Проблема заключается в том, что содержимое, которое вы размещаете внутри core-toolbar, втягивается в ребенка div внутри теней DOM core-toolbar.

<core-toolbar> 
    #shadow-root 
    ... 
    <div id="topBar" class="toolbar-tools" center horizontal layout> 
     <content></content> <!-- your content is inside of here --> 
    </div> 

Ваши атрибуты макета не применяются к этому ребенку div, так что вы не получите макет, который вы могли бы ожидать.

Самый простой способ получить макет вы после это сказать ребенку div с до flex

<core-toolbar> 
    <div flex>Foo</div> 
    <div flex>Bar</div> 
    <div>Baz</div> 
</core-toolbar> 

Here's a jsbin example