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
  • 211,628
  • 17
  • 234
  • 311
Jake Lin
  • 21
  • 1

1 Answers1

2

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
  • 894
  • 1
  • 7
  • 13