Мобильная версияУ меня есть родитель с тремя дочерними элементами, расположенными вертикально: верх и низ широкие (600x200), а середина высокая (200x600). Сам родительский элемент намного меньше (100x200), поскольку моя цель — заставить дочерние элементы быть ограничены размером родительского элемента.
Широкие дочерние элементы очень легко сдержать, установив их ширину на 100 %, но проблема возникает при попытке заставить средний дочерний элемент придерживаться оставшегося пространства.
.parent { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; ширина: 100 пикселей; высота: 200 пикселей; фон: повторяющийся линейный градиент( 45 градусов, РГБА(0, 0, 0, 0), rgba(255, 0, 0, 0,4) 20 пикселей ); граница: 1 пиксель, сплошная черная; } .широкий { ширина: 100%; } .высокий { гибкий рост: 1; } Я пробовал установить для среднего элемента высоту 100% или flex-grow 1, но это не дало желаемого эффекта:
Если для высоты установлено значение 100 %, размер двух других частей не учитывается, а когда для flex-grow установлено значение 1, отображается полный размер.
Я попробовал несколько других вариантов этого, но ни один из них не дал того, чего я на самом деле хотел, а именно:
Я, конечно, также просмотрел все сообщения Stack Overflow, напоминающие мою проблему, но не смог найти ни одного, описывающего то, что мне нужно.
Возможно ли то, что я описываю? Конечно, так и должно быть, я только что наткнулся на эту стену, пытаясь понять, как это сделать. Высота высокой части должна в конечном итоге составлять 100% - 2*(высота широкой части), но, конечно, высота широких частей зависит от того, как изменяется размер части, поэтому зная это значение в продвинутом режиме это не вариант. Я также не хочу жестко запрограммировать значение, как это было на скриншоте выше, потому что я планирую сделать родительский контейнер способным иметь переменный размер.
Будем признательны за любые предложения, заранее спасибо!
