Flexbox：一旦另一个弹性项目的宽度为0，如何包装一个弹性项目？

Question

我有一个包含 2 个元素的 flex 容器。这是JSFiddle Demo。第一个是带有文本的 dynamic 标题。第二个是多个 dynamic 按钮的包装器。动态含义文本是用javascript生成的，没有特定的width，并且可以有2-4个按钮，具体取决于用户（所以我不能将flex-basis或width设置为特定数量的px on这些弹性项目）。

我已将文本的溢出设置为hidden，将text-overflow 属性设置为ellipsis。

现在我希望按钮仅在文本完全消失时换行。这就是我的意思：

This article 让我相信它与 flex-basis 属性有关。

使用 flex-wrap 的第一个问题是，只有当它们的总 flex-basis 大于 flex 容器的大小时，flex 项目才会开始包装。

但是，无论我尝试什么属性，我似乎都无法让它按照我想要的方式工作。

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  /* Only wrap once the text is fully gone and not visible anymore. */
  /* flex-wrap: wrap; */
}

.actions button:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

Answer 1

您可以通过在第一个容器上使用大 flex-shrink 来近似此值。这将为收缩效果的第一个容器提供更多优先级。

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  flex-shrink:99999;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

您还可以像下面这样简化所有代码：

.wrapper {
  display: flex;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  flex-basis:0;
  flex-grow:1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}


.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
      Lorem ipsum dolar sit amet constructeur
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>