html - Flex Growth 应该只占用可用空间并防止将长文本的 child 推出

Question

我有一个带 child 的 flex 容器，每个 child 都有一些内容(没有固定宽度的)，并且在一个 child 上我使用 flex-grow: 1;将其填充到剩余的可用空间。
有时，正在成长的 child 包含一个长词(例如一些没有空格的 JSON)，并且它会将所有其他 child 推出视野之外。

我希望成长中的 child 有最后的优先权。它应该只填充宽度，直到它被迫推出 View 的其他子级为止。 & 应该用省略号 (...)

.parent {
  width:700px;
  border:1px solid #000;
  height:23px;
  font-family: "Roboto Mono", monospace;
  display:flex;
  margin:20px 5px;
  overflow:hidden;
}
.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color:red;
  min-width:fit-content;
  border-right:2px solid blue;
}
.grow {
  flex-grow:1;
  color:blue;
  background-color:yellow;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h3>Without long text</h3>
<div class="parent">
    <div>stuff</div>
    <div class="grow">SomeLongTextHere</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
</div>

<h3>With long text</h3>
<div class="parent">
    <div>stuff</div>
    <div class="grow">gdfhdfikghdkufgldfugildufgiludlfigudilfgujdilufgldiufgluidlfigudlfiugdilfugdlifugdlfi</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
</div>

这是一个代码笔:
https://codepen.io/amgalitzky/pen/wvdNvVv

Answer 1

删除 min-width: fit-content .这阻止了 .grow元素从收缩。
然后，禁用 flex-shrink在所有元素上，除了 .grow元素。
对您的代码进行以下调整:

.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color: red; 
  /* min-width:fit-content; */ /* adjustment */
  border-right: 2px solid blue;
}

/* new */
.parent > div:not(:nth-child(2)) {
  flex-shrink: 0;
}

.parent {
  width: 700px;
  border: 1px solid #000;
  height: 23px;
  font-family: "Roboto Mono", monospace;
  display: flex;
  margin: 20px 5px;
  overflow: hidden;
}

.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color: red; 
  /* min-width:fit-content; */ /* ADJUSTMENT */
  border-right: 2px solid blue;
}

.parent > div:not(:nth-child(2)) {
  flex-shrink: 0;  /* NEW */
}

.grow {
  flex-grow: 1;
  color: blue;
  background-color: yellow;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h3>Without long text</h3>
<div class="parent">
  <div>stuff</div>
  <div class="grow">SomeLongTextHere</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
</div>

<h3>With long text</h3>
<div class="parent">
  <div>stuff</div>
  <div class="grow">gdfhdfikghdkufgldfugildufgiludlfigudilfgujdilufgldiufgluidlfigudlfiugdilfugdlifugdlfi</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
</div>

要完全了解这里发生的事情，请参阅此帖子:

Why don't flex items shrink past content size?