Применить переполнение текста, когда больше нет места для nowrap-inline

Question

У меня есть контейнер inline-flex с двумя внутренними блоками, которые должны расширяться (без упаковки).

Во втором блоке есть еще один встроенный 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 элемент ссылки).