flex布局下超宽省略号失效

问题

双层flex布局下，对块内文字单行超出做省略号处理，但出现父元素被撑开问题。

目标效果

问题定位

flex items 都默认min-width的值是auto，导致宽度不能比内容的宽度小

超宽省略号css与min-width: auto产生冲突：

1. 超宽省略号表示：如果大小被限制，将显示省略号
2. min-width: auto表示：不限制，内容都可被包裹住

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

解决

对于flex items项，设置min-width: 0

体验地址

点击此处

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <div className="main">
    <div className="content">
      <div className="item item1">
        <span>目标：</span>
        <span>目标目标目标目标目标目标目标目标</span>
      </div>
      <div class="item item2">
        <span>来源：</span>
        <span>来源来源来源来源来源来源来源</span>
      </div>
      <div class="item item3">
        <span>来源：</span>
        <span>来源来源来源来源来源来源来源</span>
      </div>
    </div>
    <div className="menu">固定宽度100px</div>
  </div>,
  document.getElementById('container')
);

.main {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  display: flex;
}

.menu {
  flex: 0 0 100px;
  height: 200px;
  background-color: red;
}

.content {
  flex: 1 1 0;
  height: 200px;
  display: flex;

  min-width: 0;
}

.content > .item {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  min-width: 0;
}

.item1 {
  background-color: silver;
}
.item2 {
  background-color: pink;
}
.item3 {
  background-color: yellow;
}