Layaout flex resolution (error because no wrapped)

by Alejandro M

HTML

<body>
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main Content</main>
    <footer>Footer</footer>
</body>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        header {
            background: #3498db;
            color: white;
            text-align: center;
            padding: 20px;
        }

        footer {
            background: #e74c3c;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: auto;
        }

            body {
                flex-direction: row;
                flex-wrap: wrap;
            }

            header, footer {
                width: 100%;
            }

            main {
                flex: 1; /* Ocupa el espacio restante */
                background: #f1c40f;
                padding: 20px;
            }

            aside {
                width: 200px;
                background: #2ecc71;
                color: white;
                padding: 20px;
            }

        /* Mobile: Cambiar orden */
        @media (max-width: 767px) {
            aside {
                              width: 100%;

                order: 2;
            }

            main {
                order: 1;
            }

            footer {
                order: 3;
            }
        }