Flex 布局的自适应子项内容过长导致其被撑大问题

问题还原

flex 布局中，把其中一个子项设置 flex-grow: 1，可以使它自动占据所有剩余空间，但是当该子项内容过长时，子项长度会被长内容给撑开而出现滚动条。

<div class="box">
	<div class="item-1">xxxx</div>
	<div class="item-2">
    <div class="item-3">
          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>

.box {
	display: flex;
}
.item-2 {
	flex: 1;
}
.item-3 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

解决

给自适应的子项加一个 width: 0 可以完美解决该问题。

.box {
	display: flex;
}
.item-2 {
	flex: 1;
  width: 0;
}
.item-3 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}