Is it possible to keep shrinking the container ?
The reason I have it overflow like this is to create the side scrolling bar, but didn't know the text content would limit it like this.
Are there any solutions that will allow me to let the container cover 100% of the remaining width without overflowing the document?
Included HTML & CSS for reproduceability
.menuHeader{ /* position: relative; */ display: flex; align-items: flex-end; height: 5rem; width: 100vw; background-color: rgba(27, 23, 23, 0.75); } .carContainer{ /* margin: 0 auto 0 auto; */ display: flex; gap: 1.5rem; } .carContainer{ display: flex; overflow-x: auto; } .allFoodItems{ /*ul tag*/ border-left: solid; border-right: solid; border-color: #810000; display: flex; overflow-x: auto; scrollbar-width: none; align-items: flex-end; gap: 1.5rem; /*width: 60vw;*/ } .allFoodItems > li{ list-style: none; cursor: pointer; padding-left: 8px; flex:0 0 auto; /* width: max(5vw,50px); */ /* font-size: clamp(10px, 1rem,1.5vw); */ } .activeLi{ color: #CE1212; transition: 300ms; } /* RE: Apply styles to 1 class */ .next{ flex: 0 0 auto; width: 2rem; stroke:#810000; stroke-width: 5rem; } .prev{ flex: 0 0 auto; width: 2rem; stroke:#810000; stroke-width: 5rem; }<div class="menuHeader"> <div class="carContainer"><div class="next"><?xml version="1.0" ?><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="1" id="_1"><path d="M353,450a15,15,0,0,1-10.61-4.39L157.5,260.71a15,15,0,0,1,0-21.21L342.39,54.6a15,15,0,1,1,21.22,21.21L189.32,250.1,363.61,424.39A15,15,0,0,1,353,450Z"/></g></svg></div><ul class="allFoodItems"><li class="tab tab-all activeLi">Alle</li><li class="tab tab-forrett">Forrett</li><li class="tab tab-kylling">Kylling Retter</li><li class="tab tab-kongereker">Kinesiske Kongereker</li><li class="tab tab-biff">Biff Retter</li><li class="tab tab-andre">Andre Retter</li><li class="tab tab-kanton">Malaysiske & Kantonesiske Retter</li><li class="tab tab-norsk">Norske Retter</li><li class="tab tab-ulike">Ulike Retter for 1 Person</li><li class="tab tab-fisk">Fiske Retter</li><li class="tab tab-barn">Barne Meny</li></ul><div class="prev"><?xml version="1.0" ?><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="1" id="_1"><path d="M202.1,450a15,15,0,0,1-10.6-25.61L365.79,250.1,191.5,75.81A15,15,0,0,1,212.71,54.6l184.9,184.9a15,15,0,0,1,0,21.21l-184.9,184.9A15,15,0,0,1,202.1,450Z"/></g></svg></div></div> </div>