I encountered an issue with my code snippet below:
export default function Home() {
const lists = ["List A", "List B", "List C", "List D"]
return (
<div className="flex gap-3">
{lists.map(list => {
return <div key={list} className="grow-0 shrink-0 basis-80 bg-red-200">{list}</div>
})}
</div>
)
}
The width of each list is fixed at 20rem (basis-80) and functions properly. However, when I add too many lists, a horizontal scrollbar appears as expected. Surprisingly, there is also vertical overflow along with horizontal overflow. The images illustrate that the lists occupy only a fraction of the vertical space.
No horizontal overflow https://i.sstatic.net/PYaW6.png
Both axes overflow, though I anticipated only horizontal overflow. https://i.sstatic.net/AzaXE.png