2 rows, first on top and second on bottom of parent

Question

I have a absolute container (must remain absolute), with fixed height and i need to place 2 li inside, one on top and second at the bottom. Both li's have variable height and i must not use absolute position for the bottom one (will break something in the menu).

The structure is

<div id="container">
<div id="top">
    top variable height
</div>
<div id="bottom">bottom variable height</div>

You can see olso a jsfiddle here

Any idea how to do it? Thanks

Answer 1

You can do this using Flex property.

Fiddle: https://jsfiddle.net/9vq8nkpc/

HTML

<div id="container">
    <div id="top">
        top variable height
    </div>
    <div id="bottom">bottom variable heighbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightt</div>
</div>

CSS

#container {
    border: 1px solid red;
    height: 200px;
    position: absolute;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
#top, #bottom {
    border: 2px solid red;
    background: #ccc;
    width:80%;
    display: inline-block;
}