CSS Columns layout with dynamic overflow-x
Please see the included code.
- Why is my
<main>container overflowing vertically instead of horizontally?
- Why does it work when I set a fixed height on it? It should simply fill the available height it can have, and overflow on x dynamically.
Many thanks for any assistance. I had expected this to be very easy, but instead it's made me hate CSS again.7 Replies
Trying something a bit different where I reply with a video instead of text, but the main thing is, a child can't have a
height or max-height as a percentage if the parent doesn't have a fixed height. Since you're using svh on the main, I'm wondering if you can't just move that to the max-height of the main instead though, as I look at in the video.Also, if you're cool with it, I'd love to add a little intro/outro to this and make it into a YT video. I want to experiment with some quick videos answering questions from here, but only if you're okay with it 🙂
OT, I like this kind of reaction
Thanks!
o....m.....g..... I feel so incredibly humbled Kevin you would be so selfless and respond with a personalised free video (!!!) 😭 Thank you so very very much 🙏 🙏 🙏
I would have never even wanted to do the setup with the horizontal overflow, let alone stylise something to look nice, if it weren't for you: how you present and teach CSS in your totally iresistible passionate way full of knowledge and excitement. You've so inspired me to become more serious about CSS because of what it can do for the display of information, and the accessibility and engagement that can come with it. When it works, it is just so wonderful. Thank you so much, again! ❤️
If I had known this would attract your attention I would've cleaned my shoddy code and removed the commented-out or debug properties. They really just resulted from my frustration, I'm sorry you had to work with that.
My key take-aways from your video:
1. CSS often works from the inside-out and not outside-in. Ie from child to parent, and not parent to child.
My thinking is usually that I want to establish an outside architecture first, and then fill the resulting windows (children) with content, and have all their overflow, be it text or image, behave dynamically based on viewport size. I would (like to) assume the parent-to-child way of thinking is maybe not too uncommon.
It takes some time to deconstruct this expected behaviour of CSS in your head, because arguably it is more intuitive if I dare say, but it doesn't seem all too natural to CSS, even if over recent years it looks like a lot of rigidity here has been broken up by modern CSS. It would be wonderful to hear your assessment on this. I'm hoping you might see it as potential podcast content 🙂
2. Even if a
max-height is hit on a parent, this will not inherit a height information to a child/children. Such inter-CSS communication does not exist. I hope I worded this correctly.
This one stumps me still. I presume it's just not how CSS works. I had also unsuccessfully tried a height: auto on the child, because I assumed it must inherit the parent height that way.
I usually shy away from using height as much as possible, but after your video I feel more confident to use it now. Even though it seems such a basic property a lot of people will use early on in their CSS, it's actually quite a delicate beast to handle, especially with the many viewport sizes there are today.
A small potential follow-up question:
- Does max-height on a child regard a box-sizing: border-box; of the parent? I am never quite sure on this, but shall try again to test it.
Sorry to only get back now, I was on a work trip until this morning. Of course I am perfectly happy with this becoming content on YT (!!!). Again I feel so humbled this should have attracted your interest.
And I am so happy you are liking the idea: Horizontally overflowing columns were the only solution I could think of to make long text work while
- regarding line length accessibility advice
- not having to scroll the page back up to the very top once you've reached the end of a column.
I worry most users still dislike horizontal scroll bars, but I'd like to think good user experience can help do some convincing against that 🙂
(Btw the use case for this is a longer interview, where it's interviewer and interviewee going back and forth over several paragraphs. I might share my final version in a few days now that you've unlocked it 🙏)Here is the final version.
It's an interview with one of the people involved in the original Tomb Raider games in the late 90s 🙂
Maybe there's a simpler solution, but I could only get it to work by using a container query, and then a
height: 100cqh on the container intended to overflow horizontally. Otherwise I didn't know a way to have the height respond dynamically, without being set as a fixed value, as was necessitated.
I then also noticed that the layout makes no sense when only one column is rendered for smaller viewports. I was hoping there would be an easy way with Javascript to detect if the count of columns was equal to 1 or not, but it didn't seem quite so straightforward to do. I thus resorted to a media query, although I would have liked to avoid one.Glad you appreciated the video 🙂 - and don't feel like there's an issue with "unclean" code, lol. You should see my own stuff that isn't in my videos 😆
Looks like you're understanding height... height is definitely an inside-out relationship. width is a little diffrent, and more context dependent (block vs. flex. vs. grid all have some changes there), which definitely adds to the confusion.
Once you wrap your mind around the expected behaviors, that planning stage becomes a lot easier. And sometimes it still doesn't go to plan, lol. But yeah, a lot of practice, trial and error, and learning more about how layouts are rendered, and over time it does get a lot easier to figure out those expected behaviors and start knowing how it's going to work, and sometimes you'll have a rough idea but still need to try a few different things, but when you're trying them and it's sort of doing what you think, at least you know you're on the right track 🙂
I do think horizontal scrolling, in the right situations, is okay. On mobile it's becoming a lot more common because touch side-scrolling is easy.