Выровнять элементы flexbox по центру и справа с помощью text-oveflow и занять пустое место с левой стороны

Question

@ michael-benjamin Элементы flexbox выравниваются по центру и правому краю почти то, что я хочу, но с двумя отличиями:

1. Div также должен занимать пустое место с левой стороны (когда он должен быть широким)
2. Div должен сворачивать текст, когда вокруг совсем нет пустого пространства.

Что у меня есть?

A - основной центрированный объект, а BBBBBBBBBBBBBBB - правый объект.

Это нормально, пока A не вырастет:

Чего я хочу?

Можно ли с помощью flex / grid / table-tr-td / сделать какие-то другие css уловки?

Что пробовал?

1. CSS Свойства позиционирования - не могут остановиться при увеличении до B
2. Автоматические поля Flex и невидимый элемент Flex (элемент DOM) - невидимый элемент не оставляет пустого места слева
3. CSS Макет сетки - 1fr не оставлять пустое место слева

Answer 1

CSS сетка может сделать это, как показано ниже:

.container {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr minmax(0,max-content) 1fr;
  color: #fff;
}
.container::before {
  content:"";
}

.b {
  margin-left: auto;
  background: grey;
}

.a {
  margin: auto;
  background: blue;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}



body {
  background:linear-gradient(red,red) center/ 2px 100% no-repeat;
}

<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>