Flex-shrink Exercise

In this lesson, we will learn how the min-width property affects shrinking, then experiment with width or flex-basis instead of min-width.

flex-shrink and min-width

Consider the following Flex container:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>

Instead of applying a fixed width, suppose we apply a min-width to the Flex-items.

To see the container, let’s add a lower fixed height to the items. This way, the items won’t stretch to fix the full height of the container:

.container {
    display: flex;
    height: 100px;
    background-color: darkgreen;

.item {
    min-width: 100px;
    height: 80px;
    border: 1px solid black;
    box-sizing: border-box;
    background-color: lightblue;

Get hands-on with 1200+ tech skills courses.