I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; bottom: 0;. However, I am having trouble getting the parent element (conversation_container) to have a height of 100%. It seems like it should be simple, but for some reason, it's not working as expected. There might be an issue with the scaffold or I could be overlooking something obvious.
<polymer-element name="messenger-element">
<template>
<style>
:host {
width: 100%;
height: 100%;
}
#container{
height: 100%;
}
#core_header_panel {
background-color: rgb(255, 255, 255);
}
#core_toolbar {
color: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
#core_menu {
font-size: 16px;
}
#paper_fab {
position: absolute;
bottom: 20px;
right: 20px;
}
#input_container {
bottom: 0px;
width: 100%;
position: absolute;
}
#message_box_container{
padding: 10px;
}
#conversation_container{
position: relative;
}
</style>
<div id="container">
<core-scaffold>
<core-header-panel mode="seamed" id="core_header_panel" navigation flex>
<core-toolbar id="core_toolbar"></core-toolbar>
<core-menu valueattr="label" id="core_menu" theme="core-light-theme">
<core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
<core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
</core-menu>
<paper-fab icon="add" id="paper_fab"></paper-fab>
</core-header-panel>
<div tool>Messenger</div>
<div id="conversation_container">
<div id="message_box_container" horizontal center layout>
<paper-input label="Enter a message" id="paper_input" flex></paper-input>
<paper-icon-button icon="send"></paper-icon-button>
<paper-shadow z="1"></paper-shadow>
</div>
</div>
</core-scaffold>
</div>
</template>
<script type="application/dart" src="messenger-element.dart"></script>