Вложенные элементы flexbox сжимаются в странном соотношении (или не увеличиваются) ⇐ CSS

[Anonymous]

Во вложенном флексбоксе я хочу сделать элемент шириной 700 пикселей, если есть место, и сжать в противном случае.

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

.a { flex-basis: 700px; }

не помогло. ширина: 700 пикселей работает, но тогда все элементы div имеют разные размеры. Как сделать так, чтобы .a и .c имели одинаковую ширину?

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

.a {
width: 700px; /* flex-basis doesn't work */
}
.c {
flex: 1 1 700px;
}
.flex {
display: flex;
}
div {
min-width: 0;
outline: 1px solid black;
}

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

 a
bbbbbbbbbbbbbbbbbbbb

c

Обертывание текста «bbbbbbbbbbbbbbbbbb» в приводит к тому, что .a и .c имеют одинаковый размер, но затем они не сжимаются, чтобы освободить место для .b, несмотря на то, что .b и его родительский элемент имеют flex-grow: 1;:

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

.a {
width: 700px; /* flex-basis doesn't work */
}
.c {
flex: 1 1 700px;
}
.b, .inner {
flex-grow: 1;
}
.flex {
display: flex;
}
div {
min-width: 0;
outline: 1px solid black;
}

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

 a
bbbbbbbbbbbbbbbbbbbb

c

Причины, по которым флексбоксы должны быть вложенными, для простоты опущены. Например, внутренний флексбокс должен иметь позицию: относительная и дочерний элемент с позиции: абсолютный; слева: ...

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

; right: 

...

Подробнее здесь: https://stackoverflow.com/questions/798 ... -dont-grow