Адаптивность на Flex

Данное испытание потребует от вас навыков поиска решения методом проб и ошибок.

Иногда, для создания адаптивной вёрстки можно прибегать к хитростям, не лежащим на поверхности. Ваша задача — адаптировать для больших разрешений представленную страницу.

Страница состоит из двух частей:

• Меню
• Основной контент

Сейчас, на всех разрешениях экрана меню располагается сверху, а под ним находится контентная часть. Ваша задача — при ширине viewport от 1040px расположить меню сбоку от контентной части не «сломав» отображение на мобильных устройствах.

Задание

1. Допишите стили в класс .flexible-aside.
2. Допишите стили в класс .main

• Ширина бокового меню: 300px. При ширине viewport меньше 1040 пикселей: на всю доступную ширину.
• Базовая ширина контентной части без учёта отступов: 700px. Блок должен тянуться на всю доступную ширину при любом разрешении viewport

Подсказки

• Посмотреть финальные результаты на трёх разных разрешениях можно в директории __tests__/__image_snapshots__
• Перед началом задания обязательно посмотрите на поведение блоков.