[{"id":867,"created_at":"2025-10-10T11:43:36.927596+00:00","html":"\n\n\n \n \n Flexbox Challenge\n \n\n\n

Flexbox Challenge — flex-shrink, grow & basis

\n\n

\n Goal: \n Adjust the CSS so that:\n

Item A grows to fill remaining space.
Item B shrinks twice as fast as Item A when the window is narrow.
Item C stays fixed width (no grow or shrink).

\n\n

💡 Resize the browser to test your solution.

\n\n\n\n\n\n\n\n\n","css":"/* ========== Flexbox Challenge ========== */\n\n/* Basic styling (do not change these) */\nbody {\n font-family: system-ui, sans-serif;\n margin: 40px;\n background: #f7fafc;\n color: #111;\n}\n.flex-container {\n display: flex;\n border: 2px solid #ccc;\n border-radius: 10px;\n padding: 10px;\n background: white;\n gap: 10px;\n width: 80%;\n max-width: 800px;\n}\n.item {\n background: #cfe8ff;\n padding: 20px;\n text-align: center;\n border-radius: 6px;\n font-weight: bold;\n}\n\n/* ========== YOUR TASKS ========== */\n\n/*\n1️⃣ Make Item A grow to take up all remaining space.\n Hint: use flex-grow.\n*/\n.item-a {\n flex-basis: 120px;\n flex-grow: 1; /* TODO: adjust as needed */\n flex-shrink: 1;\n}\n\n/*\n2️⃣ Make Item B shrink TWICE as fast as A when width decreases.\n Hint: use flex-shrink = 2.\n*/\n.item-b {\n flex-grow: 1;\n flex-shrink: 1; /* TODO: adjust */\n}\n\n/*\n3️⃣ Make Item C fixed width (no grow, no shrink).\n Hint: flex: 0 0 Xpx or use flex-shrink: 0 and flex-grow: 0.\n*/\n.item-c {\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: 120px; /* fixed width */\n}\n\n/*\nOptional:\nAdd different background colors to visualize differences.\n*/\n.item-a { background: #a5f3fc; }\n.item-b { background: #fcd34d; }\n.item-c { background: #fca5a5; }\n\n\n\n\n\n\n","js":"// code here","user_id":"c792adbb-5a22-4783-8680-c5f3ea7e2214","project_key":"JfDIBk","description":"Detyra 11 (Flex)","plugins":null,"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tDetyra 11 (Flex)\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":17}],"profiles":{"username":"ArberD"}}]