Why does this behaviour happen?

I just wanted to know why this behaviour occurs? The right side shrinks down way more on smaller screens than the left side even tho I set both to 1fr. I attached a quick video to show you what I mean. Code: https://jsfiddle.net/kmz7pwan/4/
7 Replies
MarkBoots
MarkBoots•3y ago
Because the first column can not get smaller than the min-content (the word courses! + padding), the other columns will shrink to try and prevent overflow. (up until all columns reached the min-content width)
argbet
argbet•3y ago
Oh okay, is there a possible fix for this?
MarkBoots
MarkBoots•3y ago
well, the screen is a wide as it is... do you want 2 columns?
argbet
argbet•3y ago
Yes
MarkBoots
MarkBoots•3y ago
well, then there is no option. if a column > ~50% of the screen, 2 won't fit in 100% you could clamp padding, gap and fontsize a bit to adjust to the screenwidth. but there will always be a max
argbet
argbet•3y ago
Oh okay, thanks for the informative answers, I appreciate that!
Coder_Carl
Coder_Carl•3y ago
tables of data are expected to side scroll. So 🤷 its a feature and you should be making sure that the data can be read more than trying to squish it down to a page width.
Want results from more Discord servers?
Add your server