【发布时间】：2021-12-29 08:09:34
【问题描述】：
我正在尝试创建一行可以扩展的项目。目前我几乎拥有我需要的东西，就行为而言，一切正常，除了：
- 在桌面上，项目被截断，无法完全看到。
- 在移动设备上，有一半项目丢失，您无法滚动到它们。
Here is how it looks like (imgur)
现在这 100% 归功于我的 Flex 设置以及我的处理方式，但我最近才掌握了它，现在我必须学习所有属性之间的交互。因此，如果您能在答案旁边提供解释，我将不胜感激！
这是包含这些项目的我的卡片（它是用 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 {
}
}
}
}
}
这些是项目：
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 ") {
...........
这个想法是，在桌面上它们会尽可能大，然后当屏幕较小时，它们会慢慢缩小。但是当它们扩展时，它们会再次占用尽可能多的空间。
根据我对 FlexBox 工作原理的研究，这在理论上应该可以工作，但我无法理解为什么在玩收缩和弯曲时滚动会混乱。
编辑：忘了提一下，将 Justify Content Center 添加到包含项目的容器会导致大部分问题。
我试图让项目从中心开始（当只有 1 或 2 个项目时，我希望它们居中）并且我使用 items-start 以便当项目展开时它们不会影响其他物品和所有物品都保持在顶部。
编辑：Here's a codesandbox link，它不适用于移动设备，但会显示桌面问题
如您所见，当有多个项目时，它会拉伸父项，如果您扩展 1 个项目，则父项将进入正确的大小，不知道为什么会这样
【问题讨论】：
标签： html css reactjs flexbox tailwind-css