Css 主容器上带有flexgrow的水平可滚动div

我使用的是Material UI，在容器上它具有属性

flexgrow:1

我正在尝试一个包含卡片的可滚动的水平div，如果这个方法没有flexgrow，它实际上很简单

对于简单的可滚动，我本可以使用，但由于flex的特性我还没有真正理解，我现在真是头痛欲绝。（注：如果您有一个很好的参考资料，让我了解它是如何充分发挥作用的，我将不胜感激）

CSS: HTML:

试验
试验
试验
试验
试验
试验

为了简单起见，我最小化了一切

发生的情况是，当我设置

宽度：100%或100vw

时，它超出了屏幕

100%

不会填充父级宽度，

100vw

会添加我的侧边栏的宽度，而不是

vw

本身。这意味着，滚动条恰好位于它连接到最基本容器的

滚动包装器上。
替换

.scrolling-wrapper .card { 
  ...
  flex: 1;
  width: 320px;
  ...
}

与：

.scrolling-wrapper .card {
  ...
  flex: 0 0 320px; 
  ...
}

看到了


解释：
flex:1；宽度：320px，在您的情况下，转换为：

flex-grow: 1;    /* I grow if there's available space      */
flex-shrink: 1;  /* I shrink if there's not enough space   */
flex-basis: 0%;  /* initial flex-basis (width): 0%         */
width: 320px;    /* ignored (overwritten by `flex-basis`)  */

如果有额外的空间，您不希望您的卡增长：

flex-grow: 0;

如果没有足够的空间，您不希望您的卡收缩：

flex-shrink: 0;

您希望您的卡从（并保持）宽度为
320px

flex-basis: 320px;

您不需要
宽度


此外，如果您有任何情况下，卡不填充容器的宽度，您可能需要设置

.scrolling-wrapper {
  overflow-x: auto;
}

（而不是
滚动
），这样就不会渲染无用的滚动条


现在，我回答了你的问题，我需要问自己一个问题：为什么你要用flexbox显示卡片？因为
.scrolling wrapper
中的flexbox与它所属的flexbox没有任何关系

使用flexbox显示卡片的唯一原因是，如果您希望在没有足够的卡片填充容器宽度时将其展开，请使用
justify content:space-between，但情况似乎并非如此

如您所见，它可以通过flexbox完成，但可以通过
display:block；空白：nowrap，正如您链接的文章中所述，而
.scrolling wrapper
具有
flex-grow:1
，因此它扩展到整个可用空间（假设其他子项具有
flex-grow:0
）。目前，您没有提供任何有关
.scrolling wrapper
外部情况的信息，我相信这就是您遇到的问题
 更换

.scrolling-wrapper .card { 
  ...
  flex: 1;
  width: 320px;
  ...
}

与：

.scrolling-wrapper .card {
  ...
  flex: 0 0 320px; 
  ...
}

看到了


解释：
flex:1；宽度：320px，在您的情况下，转换为：

flex-grow: 1;    /* I grow if there's available space      */
flex-shrink: 1;  /* I shrink if there's not enough space   */
flex-basis: 0%;  /* initial flex-basis (width): 0%         */
width: 320px;    /* ignored (overwritten by `flex-basis`)  */

如果有额外的空间，您不希望您的卡增长：

flex-grow: 0;

如果没有足够的空间，您不希望您的卡收缩：

flex-shrink: 0;

您希望您的卡从（并保持）宽度为
320px

flex-basis: 320px;

您不需要
宽度


此外，如果您有任何情况下，卡不填充容器的宽度，您可能需要设置

.scrolling-wrapper {
  overflow-x: auto;
}

（而不是
滚动
），这样就不会渲染无用的滚动条


现在，我回答了你的问题，我需要问自己一个问题：为什么你要用flexbox显示卡片？因为
.scrolling wrapper
中的flexbox与它所属的flexbox没有任何关系

使用flexbox显示卡片的唯一原因是，如果您希望在没有足够的卡片填充容器宽度时将其展开，请使用
justify content:space-between，但情况似乎并非如此

如您所见，它可以通过flexbox完成，但可以通过
display:block；空白：nowrap，正如您链接的文章中所述，而
.scrolling wrapper
具有
flex-grow:1
，因此它扩展到整个可用空间（假设其他子项具有
flex-grow:0
）。目前，您没有提供任何有关
.scrolling wrapper
外部情况的信息，我相信这就是您遇到的问题
 哇，非常感谢你为我的基本问题提供了非常详细和清晰的解释。在
.scrolling wrapper
的父级上，它有一个
flex grow:1
。
flex
属性中的第一个整数是否表示
flex grow
的整数，第二个表示
flex shrink
？（对不起，我知道我可以查一下，不过我还是会问的。）。我真的很感谢你的帮助。它不会浪费，因为我也会尽自己的一份力量学习最基本的部分。我会让它变得简单：右键单击任何页面中想要的任何元素（使用Chrome）并选择“检查元素”。如果devtools窗口有足够的宽度，您将在右侧看到几个选项卡：样式、计算等。。。。转到样式，在
element.style{}
（顶部）中，编写
flex:1
，然后按Tab键。现在单击
flex
和
1
之间的小箭头。这是命令。您可以对任何速记CSS属性执行此操作。哇。我不知道。非常感谢你提供的信息。我知道这很愚蠢，但我真的很感谢你的帮助。给你更多的力量！哇，非常感谢你为我的基本问题提供了非常详细和清晰的解释。在
.scrolling wrapper
的父级上，它有一个
flex grow:1
。
flex
属性中的第一个整数是否表示
flex grow
的整数，第二个表示
flex shrink
？（对不起，我知道我可以查一下，不过我还是会问的。）。我真的很感谢你的帮助。它不会浪费，因为我也会尽自己的一份力量学习最基本的部分。我会让它变得简单：右键单击任何页面中想要的任何元素（使用Chrome）并选择“检查元素”。如果devtools窗口具有足够的宽度，