Create a Flexbox with expanding content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex

Description

Create a Flexbox with expanding content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Overflowed flexbox</title> 
  <style>
#container {<!--   ww w .j  a v  a 2  s .  c o  m-->
   width:413px;
   height:661px;
   border:3px solid Chartreuse;
   display:flex;
   flex-direction:column;
}

#container h1 {
   border-bottom:2px solid yellow;
   margin-bottom:0;
   padding:2rem;
}

#container #message-list {
   flex-grow:2;
   flex-shrink:2;
   overflow-y:scroll;
}

#container #message-list .message {
   margin:2rem;
   padding:2rem;
   border:2px solid blue;
}

#container #message-input {
   padding:2rem;
   display:block;
   border-top:3px solid pink;
   position:relative;
}

#container #message-input textarea {
   flex-grow:2;
   width:85%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="container"> 
   <h1>My Header</h1> 
   <div id="message-list"> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
    <div class="message">
      This is a dummy message. 
    </div> 
   </div> 
   <div id="message-input"> 
    <textarea style="height: 100px">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </textarea> 
    <button id="send">Send</button> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials