Flex-shrink Exercise

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>
</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;
}