Flex-Box 1.00

by velo_ninja

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Dynamic Flexbox</title>
        <style>
            * { margin:0; padding:0; box-sizing:border-box }
            html, body {
                height:99%; width:99%; margin:10px;
                display:flex; justify-content:center; align-items:center;
            }
            .main-container {
                display:flex; flex-direction:column;
                width:99%; height:99%;
                box-shadow:2px 2px 10px rgba(0,0,0,0.2);
                overflow:hidden; transition:flex-direction .3s;
            }
            .box {
                display:flex; justify-content:center; align-items:center;
                font-size:24px; font-weight:bold; color:grey;
                transition:height .3s, width .3s;
                max-width:100%; max-height:100%; overflow: hidden; 
                box-shadow:2px 2px 10px rgba(0,0,0,0.5);
            }
            .toggle-btn {
                margin-bottom:15px; padding:10px 20px;
                font-size:16px; font-weight:bold;
                border:none; background:#2ecc71; color:#fff;
                cursor:pointer; border-radius:5px;
                transition:background .3s;
            }
            .toggle-btn:hover { background:#27ae60 }
        </style>

        <script>
            let __flexContext = null;
            function expandSection(configs, hoverId, isRow) {
                const hovered = configs.find(c => c.id === hoverId);
                const others  = configs.filter(c => c.id !== hoverId);
                const O = hovered.originalHeight, E = hovered.expandFactor;
                const newSize = Math.min(100, O + (E/100)*(100 - O));
                const leftover = 100 - newSize;
                const sumOthers = others.reduce((s,c) => s + c.originalHeight, 0) || 1;
                if (isRow) {...