遇到问题

今天在写一个文字自动根据最大宽度截断并添加省略号的例子时，遇到了一个问题。

外部容器无论如何都会被内部元素撑开，即使是我把内部元素width:10% 设置的非常小

大致css代码如下

.container {
  display: flex;
  max-width: 100px;
}

.left {
  max-width: 5px;
  background-color: lightblue;
}

.right {
  flex: 1;
  background-color: lightgreen;
}

.text {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

解决方案

.right {
  flex: 1;
  background-color: lightgreen;
  min-width: 0
}

经过数小时的修改、查资料。终于解决了问题。

方法很简单，在right上面加上一行min-width:0即可

原理

而产生这个问题的原因是什么呢？

box布局默认最小值

由于flex布局默认会把元素min-width设置为auto，而导致元素最小值根据文字内容来定宽，但我们的文字又设置了white-space:nowrap

所以整个样式就变得非常尴尬，导致盒模型宽度变为无限长

而我们的min-width: 0重置了容器的最小宽度，使得容器能够正常按照max-width 来定宽