Why can't flex item with no-wrap child shrink?

user_16574544 0
Viewed 232

The flex item(item-2) has a no-wrap child (long) with long content.

As far as I know, flex-shrink should kick in when flex items exceed parent(box)'s width.

Could anyone explain why.

.box {
  display: flex;
}

.item-2 {
  flex: 1 1 10000px;
}

.long {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background-color: dodgerblue;
}
<div class="box">
  <div class="item-1">left</div>
  <div class="item-2">
    <div class="long">
      long content - long content - long content - long content - long content long content - long content - long content - long content - long content long content - long content - long content - long content - long content
    </div>
  </div>
</div>

flexbox css
1 Answers

Flex, not shrink because of white-space: nowrap rule in long class.

A flex item cannot be smaller than the size of its content along the main axis.

user_137344120
Related