Controlling the Dimensions of Flex Items in CSS

To control the dimensions of Flex Items in CSS, use the flex property. Following is the code controlling the dimensions of flex items −


 Live Demo

<!DOCTYPE html>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
.container {
   display: flex;
   width: 100%;
div {
   width: 200px;
   height: 200px;
   color: white;
   text-align: center;
   font-size: 30px;
.first {
   background-color: rgb(55, 0, 255);
   flex: 2 1 auto;
.second {
   background-color: red;
.third {
   background-color: rgb(140, 0, 255);
<h1>Controlling flex items dimesions</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>


The above code will produce the following output −