Make dynamic width of elements inside of flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

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

Description

Make dynamic width of elements inside of flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  tantata</title> 
  <style>

div {<!--  w  ww  .  j  av a 2  s  .  c  o  m-->
   display: flex;
   width: 300px;
   margin-bottom: 20px;
   border: 1px solid red;
   flex-wrap:nowrap;
}
label {
   height: 21px;
   line-height: 21px;
   font-size: 14px;
   color: black;
   flex-grow: 0;
}
input {
   margin-left: 20px;
   flex-grow: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div> 
   <label>Company</label> 
   <input type="text"> 
  </div> 
  <div> 
   <label>Street</label> 
   <input type="text"> 
  </div> 
  <div> 
   <label>Who are you?</label> 
   <input type="text"> 
  </div>  
 </body>
</html>

Related Tutorials