html - Transition height, get bigger to 2 sides -

i made text window gets bigger if hover on (with transition adds more height). "drops" down bottom , pushes away other text. there way can make "drop" bottom 50% , "climb" 50%?

#tcontent {    float: left;    background-color: yellow;    height: 150px;    width: 100%;    margin-top: 100px;  }  #mcontent {    float: left;    background-color: blue;    height: 30px;    width: 100%;    height: 150px;    transition: height 0.5s ease;  }  #bcontent {    float: left;    background-color: green;    height: 30px;    width: 100%;    height: 150px;  }  #mcontent:hover {    float: left;    background-color: blue;    height: 30px;    width: 100%;    height: 250px;  }

<div id="main">    <div id="tcontent">    </div>    <div id="mcontent">    </div>    <div id="bcontent">    </div>  </div>

this awkward through conventional means content flows left right, top bottom , #mcontent needs space move above. however, can achieved using flexbox.

• add #main display: flex; children use flexbox model
• add flex-direction: column; #main make children order top bottom
• add height: 550px; #main make high 3 children when #mcontent expanded
• add justify-content: center; #main center children in middle

the principle behind elements set in middle of #main. when #mcontent grows, pushes #tcontent , #bcontent because have space move into. set centered #mcontent stay in middle.

#main {    display: flex;    flex-direction: column;    height: 550px;    justify-content: center;  }  #tcontent {    background-color: yellow;    height: 150px;    width: 100%;  }  #mcontent {    background-color: blue;    height: 150px;    transition: height 0.5s ease;    width: 100%;  }  #mcontent:hover {    height: 250px;  }  #bcontent {    background-color: green;    height: 150px;    width: 100%;  }

<div id="main">    <div id="tcontent"></div>    <div id="mcontent"></div>    <div id="bcontent"></div>  </div>