On each item: flex-grow (how greedily it expands), flex-shrink (how readily it shrinks), flex-basis (its starting size). The flex shorthand packs all three — flex:1 means "grow to fill equally". This makes flexible, proportional columns.
On each item: flex-grow (how greedily it expands), flex-shrink (how readily it shrinks), flex-basis (its starting size). The flex shorthand packs all three — flex:1 means "grow to fill equally". This makes flexible, proportional columns.
<!doctype html><html><head><meta charset="utf-8">
<style>.f{display:flex;gap:10px}.side{flex:0 0 120px;background:#1c1240}.main{flex:1;background:#140a28}.f>div{color:#e6e0ff;padding:16px}</style></head><body style="background:#06040d;padding:20px"><div class="f"><div class="side">sidebar</div><div class="main">flexible main</div></div></body></html>