html{background-color:gray;height:100%}body{margin:0;font-family:sans-serif;height:100%;display:flex;flex-direction:column}aside{background:#f4f4f4;padding:1rem;border-right:1px solid #ddd}.main-area{flex:1;display:flex;flex-direction:column}main{padding:2rem;background-color:red;flex:1}nav ul{display:flex;gap:1rem;padding:0;margin:0;flex-wrap:wrap}nav li{list-style:none;margin:0;padding:0}@media(min-width: 768px)and (max-width: 2549px){body{display:flex;height:100vh;overflow:hidden;flex-direction:row;justify-content:flex-start}aside{width:220px;border-right:1px solid #ddd;overflow:hidden}.main-area{flex:1;max-width:1000px}main{flex:1;margin:0;overflow-y:auto}nav ul{display:block}nav li{display:block;margin-bottom:.5rem}}@media(min-width: 2550px){body{display:flex;height:100vh;overflow:hidden;flex-direction:row;justify-content:center}aside{width:220px;overflow:hidden}.main-area{flex:0 0 1000px;max-width:1000px}main{flex:1;margin:0;overflow-y:auto}nav ul{display:block}nav li{display:block;margin-bottom:.5rem}}