时间戳

首页 > 解决方案 > 主容器上带有 flexgrow 的水平可滚动 div

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

问题描述

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

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

对于简单的可滚动，我可以使用它，但是由于我还没有真正理解的 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它被附加到最基础的容器上。

标签： csssassflexboxmaterial-ui

解决方案

代替

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

和：

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

看这里。

解释: 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 显示卡片？因为 flexbox 里面的 flexbox 与它所在的 flexbox.scrolling-wrapper没有任何关系。

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

正如你所看到的，它可以用 flexbox 来完成，但它可以很好地用 来完成display: block; white-space: nowrap;，就像在你链接的文章中一样，while .scrolling-wrapper has flex-grow: 1，所以它扩展了整个可用空间（假设其他孩子有flex-grow: 0）。目前，你没有提供关于外面发生了什么的信息.scrolling-wrapper，我相信这就是你遇到的麻烦。

推荐阅读