CSS для макета Flexbox или Grid 4 Box (должен быть простым)

Galant8th

Пользователь
Регистрация
25.08.14
Сообщения
2
Реакции
0
Баллы
1
Мне нужен макет из 4 коробок.

Есть 4 направления, 3 из которых важные. Основная часть — это Canvas, на котором пользователь может рисовать контент. Содержимое холста может превосходить то, что пользователь рисует на экране. Таким образом, ему нужны еще два блока, в которых будут храниться горизонтальная и вертикальная полосы прокрутки. Полосы прокрутки имеют высоту 20 пикселей для горизонтальной полосы и ширину 20 пикселей для вертикальной полосы прокрутки. Четвертое поле может быть пустым полем, блокнотом, заполнителем — как бы вы его ни называли. По сути «обычное окно».

КОД JS ДЛЯ ХОЛСТА И ПРОКРУТКИ ГОТОВ.


CSS для макета Flexbox или Grid 4 Box (должен быть простым)
Я не прошу кого-то сделать мне холст, это незавершенное производство. Мне просто нужен простой CSS-контейнер из 4 блоков.

Вот в чем проблема. Полосы прокрутки отображаются только в зависимости от условий на холсте. Это уже запрограммировано. Итак, мне нужно что-то, что позволит сворачивать нужные «коробки», содержащие нужную полосу прокрутки. Аналогично, нижняя строка также должна свернуться, когда полоса прокрутки скрыта. Сами полосы прокрутки я просто устанавливаю на «display: none», когда они не нужны.

На скриншоте выше полосы прокрутки не находятся в том же блоке, что и холст, на котором нарисована игровая карта, они абсолютны, поэтому не влияют на размер холста, и это то, что я хочу изменить, чтобы максимизировать видимость. для пользователя. Мне просто нужен какой-то макет Flexbox или Grid, который может Свернуться там, где находятся эти полосы прокрутки, когда они не нужны.

Не уверен, что сетка будет работать, потому что сетка допускает только блоки одинакового размера, а не поля разного размера.

Кажется, я ужасно плохо работаю с Flexbox. Это также может быть не лучший подход.

Немного помощи, ребята?
 
Сверху Снизу