Регулировка ширины элементов при изменении размера флексбокса [дубликат] ⇐ CSS

[Anonymous]

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


Запустите следующий фрагмент кода, чтобы увидеть реализацию .

Код: Выделить всё

.container {
display: flex;
width: 100%;
padding: 30px;
background-color: beige;
box-sizing: border-box;
}

.child {
font-size: 20px;
width: 50%;
display: flex;
justify-content: space-between;
background-color: #aaa;
margin: 10px;
position: relative;
resize: horizontal;
overflow: auto;
}

.inner {
text-wrap: nowrap;
}

.inner-child1 {
flex-basis: 0%;
flex-shrink: 1;
flex-grow: 1;
background-color: azure;
}

.inner-child2 {
background-color: bisque;
}

Код: Выделить всё

child1 ---------------
child2 ---------------
child3 ---------------


child4


outer

Подробнее здесь: https://stackoverflow.com/questions/787 ... ng-flexbox