The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Dynamic content spacing/sizing within a scrollable container

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #277114


    I’m currently playing around with a FAQ’s section which has a container filled with FAQs as separate divs. The container is set to overflow-x:auto; and there are more FAQ’s than there is space for them so the scroll kicks in. I’d like to get these to display nicely on the page however these FAQ’s can range from being 1-5 lines long and the intent is for them to be updated regularly. Because of this it is very likely that one of these will be cut off at the edge of the container (and if I adjust it for the current FAQ’s it will need to be adjusted again every time the section is updated).

    Now I could use javascript to calculate the heights of the elements and resize them accordingly so that the first five or so fit perfectly into the container and you scroll for the rest but I’ve recently been playing around with flex and css-grids for other things lately and I was curious to know if there was a pure css method to achieve this goal. I’ve been playing around with both on a pen for the best part of an hour but I’m yet to find a solution on my own.

    Here’s a link to the sample pen



    Here’s the JS solution I came up with if you wanted to see what I mean.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.