title: Flex Basis

Flex-basis

To determine the initial width or height of a flex element along the main axis, we can use flex-basis: instead of width: or height:. flex-basis: is dynamic, so it can shrink or grow to fit inside the flex container.
flex-basis: can be set as a value, e.g. 200px; 20vw; 50vh; or auto. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with flex-basis: 20vw;, while the second and third use flex-basis: auto;.

Example 1:

.container {
display: flex;
flex-direction: row;
justify-content: center;
background-color: yellow;
}
.box {
background-color: brown;
flex-basis: 20vw;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}

<div class="container">
<div class="box">Box 1</div>
</div>

Examples 2 and 3:

.box {
background-color: brown;
flex-basis: auto;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}