CSS：

Question

我正在使用Material UI，在容器上它具有属性flexgrow:1

我正在尝试创建一个包含卡片的可滚动水平div，如果这种方法没有弹性增长，这实际上很简单。

对于简单的可滚动对象，我本可以使用this，但是由于我尚未真正了解其flex属性，所以现在我将头撞到了墙上。（注意：如果您有很多参考资料可以让我了解它是如何工作的，我将不胜感激。）

CSS：

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;

  .card {
    display: flex;
    flex: 1;
    width: 320px;
    height: 180px;
    margin: 15px;
    padding: 15px;
  }
}

HTML：

<div className="scrolling-wrapper">
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
</div>

为简单起见，我将所有内容最小化。

发生的事情是，当我设置width: 100% or 100vw时，它超出了屏幕。 100%不会填充父级宽度，而100vw会添加边栏的宽度，而不是vw本身。意思是，滚动条恰好位于附加到最基本容器的scrolling-wrapper处。

Answer 1

替换

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

具有：

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

here看到它。

说明：根据您的情况，flex: 1; width: 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;

您不需要width。
另外，万一您的卡片宽度不够，您可能需要设置

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

（而不是scroll），因此您不会呈现无用的滚动条。

现在，我回答了您的问题，我需要自问：您为什么要使用flexbox显示卡？由于.scrolling-wrapper中的flexbox与没有任何关系，因此它是其中的一部分。

使用flexbox显示卡片的唯一原因是，如果您希望它们在没有足够卡片填充justify-content: space-between;的宽度的情况下散布，但这似乎不是情况。

如您所见，可以使用flexbox来完成，但是可以很好地使用display: block; white-space: nowrap;来完成，正如您链接的文章中， while .scrolling-wrapper flex-grow: 1，因此它会扩展到整个可用空间（假设其他子项都有flex-grow: 0）。目前，您没有提供.scrolling-wrapper以外发生的任何信息，我相信这是您遇到的麻烦。

在主容器上具有flexgrow的水平可滚动div

CSS：

HTML：

1 个答案: