当没有更多空间用于nowrap-inline时应用文本溢出

Question

我有一个 inline-flex 容器，里面有两个必须展开的内部块（没有包装）。

在第二个块中有另一个 inline-flex 容器，其中包含两个内部内嵌块 必须永远不会包装其内容。

我需要什么

当最顶层容器（text-overflow: ellipsis）的宽度不足以将所有内部块显示为div.width时，是显示white-space: nowrap。

如果div.width链接的内容太长，a 的内容必须永远不会溢出其容器。

片段

.splitbutton {
  display: inline-flex;
  border: 4px solid violet;
}

.default {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.default a {
/*  white-space: nowrap; */
}

.button {
  background-color: green;
  padding: 5px;
}

.container1 {
  white-space: nowrap;
}

.container1,
.container2 {
  flex: 1 1 auto;
  border: 3px double green;
}

.width {
  border: 3px solid red;
  /*width: 350px;*/
    
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

<div class="width">
  <div class="container1">
    <span>Any kind of inline text</span>
  </div>
  <div class="container2">
    <div class="splitbutton">
      <div class="default">
        <a href="#" title="Looooooooooooong text with many many spaces and letters">Looooooooooooong text with many many spaces and letters</a>
      </div>
      <span class="button">button</span>
    </div>
  </div>
</div>

注意

• 当前块中没有一个可以指定特定的固定宽度！
• 按钮必须始终保持可见（省略号最终应该应用于a链接元素）。