• • 此问题在此处已有答案**：

Why don't flex items shrink past content size?（5个答案）
2天前关闭。
我无法让省略号在Flex框中工作。我已经看了大量的例子和答案，但都没有效果。我需要在第2列中用省略号缩短长文本。

* {
  box-sizing: border-box;
}

.application {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  margin: 10px;
}
.container1,
.container2 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 10px;
  border: 1px solid green;
}
.container2 {
  border: 1px solid purple;
}
.row {
  display: flex;
  width: 100%;
  padding: 5px;
}
.col1 {
  width: 100px;
  background: lightgreen;
}
.col2 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col3 {
  width: 60px;
  background: yellow;
}

<div class="application">
  <div class="container1">
    <div class="row">
      <div class="col1"> </div>
      <div class="col2">This is a short Text</div>
      <div class="col3"></div>
    </div>
    <div class="row">
      <div class="col1"></div>
      <div class="col2">
          Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
      </div>
      <div class="col3"></div>     
    </div>
  </div>
  <div class="container2"></div>
</div>