2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Jake Lin
  • 21
  • 1

1 Answers1

1

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.

Mohit Kushwaha
  • 1,003
  • 1
  • 10
  • 15