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
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)Oh okay, is there a possible fix for this?
well, the screen is a wide as it is... do you want 2 columns?
Yes
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
Oh okay, thanks for the informative answers, I appreciate that!
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.