Css Flex未正确包装元件

我目前正在使用flex开发应用程序。问题是flex没有包装我的组件。 我正在使用flex、react和样式化组件。在我的另一个项目中，相同的代码工作得很好，所以我无法真正找出这一个中的错误

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%;
`;

我希望面板组件在移动设备上包裹左右面板，所以我希望左面板100%，右面板在左面板下包裹。当我在右面板上设置min width时，它在全屏和手机上都会下降

---

简短：我希望左面板增长，右面板增长并向下（包装）。

请提供一个包含代码的沙盒链接。您可以像下面这样使用模板：寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在一个文本中。看见