Cannot justify elements inside coretoolbar - polymer

Question

I am trying to justify some elements inside core-toolbar but I cannot get it to work.
here is my code:
<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>
Code result
Expected result

Answer 1

The issue is that the content you place inside of the core-toolbar is being pulled into a child div inside of core-toolbar's Shadow DOM.
<core-toolbar>
#shadow-root
...
<div id="topBar" class="toolbar-tools" center horizontal layout>
<content></content> <!-- your content is inside of here -->
</div>
Your layout attributes are not being applied to this child div, so you don't get the layout you'd expect.
The easiest way to get the layout you're after is to tell the child divs to flex
<core-toolbar>
<div flex>Foo</div>
<div flex>Bar</div>
<div>Baz</div>
</core-toolbar>
Here's a jsbin example