修复，匹配内容并填写相同的弹性容器[重复]

Question

这个问题在这里已有答案：

• Why don't flex items shrink past content size? 1回答

我想做以下布局：

<div class="main">
  <div class="container">
    <div class="first">
      fixed size
    </div>
    <div class="second">
      <span>very very very very very very very long text</span>
      <span>other text</span>
    </div>
    <div class="third">
      1000000000000000
    </div>
  </div>
</div>

看起来像这样：

容器里面应该有三个div：

• 第一个固定大小的div
• 第三个div与宽度匹配的内容
• 第二个div填充剩余的容器。在div里面有两个跨度。第一个跨度应该与它的父级相同，并且包含非常长的文本行，如果它不适合则应该加点。

我尝试了以下css代码：

* {
  box-sizing: border-box;
}

.main {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  padding: 10px;
}

.container {
  display: flex;
  width: 100%;
}

.container div {
  display: flex;
  border: 1px solid black;
}

.first {
  flex: 0 0 100px;
}

.second {
  flex-direction: column;
  flex: 1;
}

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}


.third {
  flex: 0 1 auto;
}

但结果并不像我想的那样，因为元素溢出容器之外，长文本没有点缀。

在我的CSS中我应该改变什么来使这项工作？

但是：ぁzxswい

Answer 1

你需要在span的父级上设置https://stackblitz.com/edit/js-vnr21c

min-width:0

* {
  box-sizing: border-box;
}

.main {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  padding: 10px;
}

.container {
  display: flex;
}

.container div {
  border: 1px solid black;
}

.first {
  flex: 0 0 100px;
}

.second {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}

.third {
  flex: 0 1 auto;
}