Представьте себе следующий макет, где точки представляют пространство между полями:

[Left box]......[Center box]......[Right box]

Когда я удаляю правую коробку, мне нравится, чтобы центральная коробка все еще была в центре, вот так:

[Left box]......[Center box].................

То же самое касается, если бы я удалил левую коробку.

................[Center box].................

Теперь, когда содержимое внутри центрального поля становится длиннее, оно занимает столько свободного места, сколько необходимо, оставаясь при этом центрированным. Левый и правый прямоугольник никогда не будут сжиматься, и поэтому, когда места не осталось,overflow:hidden а такжеtext-overflow: ellipsis вступит в силу, чтобы нарушить содержание;

[Left box][Center boxxxxxxxxxxxxx][Right box]

Все вышесказанное - моя идеальная ситуация, но я не знаю, как этого добиться. Потому что, когда я создаю гибкую структуру, вот так:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

Если левый и правый боксы будут одинакового размера, я получу желаемый эффект. Однако, когда один из двух имеет другой размер, центрированный прямоугольник больше не является центрированным.

Кто-нибудь может мне помочь?

Обновить

A justify-self было бы неплохо, это было бы идеально:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}