Flex не упаковывает правильно

Question

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

const Panels = styled.div`
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
`;

const LeftPanel = styled.div`
    display: flex;
    height: 100%;
    min-width: 60%;
`;

const RightPanel = styled.div`
    display: flex;
    height: 100%;
    flex-direction: column;
    min-width: 41%;
`;

Я хочу, чтобы компонент Panels переносил левую и правую панели на мобильных устройствах, поэтому я хочу, чтобы левая панель заняла 100%, а правая панель - под левой. Когда я устанавливаю минимальную ширину на правой панели, она уменьшается как в полноэкранном, так и в мобильном режимах.

Short: я хочу, чтобы левая панель увеличивалась, а правая панель увеличивалась и go вниз (обтекание).