The Mystery of CSS Flex Item Shrink

Why don’t flex items shrink past their content size?

Flex layout background

The Flexbox Layout module provides a much more efficient way for us to layout, align and adjust spaces between the items in a flex container without knowing their size or with a dynamic one, thus with a word “flex”.

In a flex container, the items are automatically expand or shrink based on the available free spaces to prevent the overflow, especially with a direction-agnostic layout strategy.

Flex items shrinking problems

As a frontend developer, we often have the need to truncate and display an ellipse when one text overflowed its container to prevent breaking the UI especially on mobile devices.

To display an truncated text with three dots when the context is overflowed, we can do like this:

HTML:

<div class="parent">
  <div class="child">
    <p class="truncate">
      I won't shrink past my minimum intrinsic width, but I probably       should.
    </p>
  </div>
  
  <div class="child">
    <p class="truncate">
      I won't shrink past my minimum intrinsic width, but I probably  should.
    </p>
  </div>
</div>

CSS:

.parent {
  display: flex;
  
  padding: 1rem;
  background: #C5EFF7;
  border: 2px solid rgba(0, 0, 0, 0.3);
  max-width: 70%;
  margin: 2rem auto;
}