I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with:
- On Desktop, the items are cut off and not fully visible.
- On Mobile, half of the items are missing and cannot be scrolled to.
Here is how it looks like (imgur)
The problems stem from my Flex setup and how I manage it. I recently grasped the basics but now need to understand the interactions between different properties better. Any explanation alongside a solution would be greatly appreciated!
This is the Card that holds these items (written in kotlin):
val x = { props ->
// this is the Card
return@fc div("w-full flex flex-col items-center shadow-lg p-4 rounded-lg lg:shadow-none") {
// This is the container holding the items
div("flex w-full gap-3 overflow-x-auto items-start justify-center my-5 snap-x p-2") {
model.content.forEachIndexed { index, item ->
ModeratedContentItem {
}
}
}
}
}
And here are the items:
return@fc div("w-full shadow-md rounded-md " +
"items-center max-w-sm flex-initial lg:shrink-0 snap-center " + if(expanded) " flex-none " else " shrink ") {
...........
The concept is for the items to enlarge on desktop and shrink gradually on smaller screens, then expand again when needed. However, playing around with shrinking and flex seems to mess up the scrolling functionality.
According to my understanding of FlexBox workings, this setup should function correctly. I'm unsure why the scrolling behaves unexpectedly while experimenting with shrinking and flex properties.
EDIT: Adding Justify Content Center to the item container is causing most of the issues.
I aim to have the items start from the center (especially when there are fewer items) and by using items-start, ensure that expanded items do not affect others and remain connected to the top.
EDIT: Codesandbox link provided here, although it doesn't work well on mobile, it showcases the desktop issue accurately.
You can observe that when multiple items are present, the parent container stretches. If you expand one item, the parent container adjusts to the correct size, but the reason behind this behavior remains unclear.