I am having trouble creating a horizontal scroll with the tab menu items once they reach the full width of the Tabs parent container.
I have searched around and added the custom code .tabs-menu { overflow-x: scroll; white-space:nowrap; }
but that doesn’t seem to have worked. All it’s doing is extending the total width of the site.
Hi @vincent,
Thanks for replying. Exactly like that. I can see it’s working on the ‘Content Test’ page but it’s not behaving the same way on the ‘Home’ page. Would it be affected by anything else?
Rob
@vincent,
I’ve found what’s causing the overflow to not work properly. It’s the grid. The middle column is set at 1FR but if i change this to a percentage then the overflow works (see attached image).
This is frustrating to say the least as completely defeats the object of using the grid if straightforward functions don’t work correctly. Have you found anything similar to this or know of any work arounds (apart from ditching the grid, of course.)
I’m never sure when Grid is a good option, I wouldn’t have used grid for a full page layout. Flexbox seems a better option to me. And it’s very easy to turn your layout to flex.
I’m with you on that; I’m not sure when’s best to use it either. I thought this is the ideal scenario; and it has worked, but annoying niggles such as this. I’m not sure whether it’s a bug or just a support issue - what do you think?
Thanks for the diagram, I appreciate it. I’ll revert to Flexbox as I had a problem with a slider which I am sure is another symptom of using Grids and FR units.
Grid to me is to be used when you want a very specific, disparate, uneven grid of things, also for when you need to move things around across devices in an unorthodox way. But when things are in order, and when you want to control their order and stacking across devices, Flexbox is IMHO better, or maybe better when you use Webflow.
If you follow developers forums you’ll see that Grid gets immensely more love than Flexbox. there may be a reason, it’s that when you manually code a website, Flexbox is more complicated to use than Grid. But when you’re using Webflow, that’s the opposite, or at least Flexbox is super duper easy to use.
That makes sense. I love grid but agree it’s actually harder to use in Webflow than Flexbox. I found myself resorting to Grid because it’s there, rather than working out which is easier to use for the task at hand. Which in this case, you have provided a valid reason to stick with Flexbox.
I’m not sure about that and I’m not the one to tell because I haven’t invested so much time in Grid in Webflow. It’s a complex feature and I think the way they designed it is super clever, but I’m not seizing the full potential of it. I never had to watch any tutorial to master Flexbox in Webflow, but I feel I need to watch the Grid’s ones before getting all the potential.
That’s what I was referring too. The learning curve for grid is steeper than Flexbox, but you can no doubt get more out of it once mastered. Flexbox was easy to pick up, but Grid took me a few go’s just to ‘get it’.
Back to the original problem, should I report scroll overflow not working within a grid cell with an FR measurement? Not sure if it’s a bug or some sort of browser support issue.
I don’t think it’s a bug at all, but I can’t either answer this question. I’m going maybe to ask @matthewpmunger who I believe has a great uderstanding of the CSS Grid Webflow feature.
@roblewi5 - I just experienced this too! the overflow scroll not working inside a grid! Thank you - this really helped me overcome the issue I was having.
