时间戳

首页 > 解决方案 > 即使指定了宽度和高度，溢出 x 也不起作用

javascript - 即使指定了宽度和高度，溢出 x 也不起作用

问题描述

我正在制作一个反应应用程序，这是我的 apiresults 组件的 css。

.Api {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background: repeating-linear-gradient(
    135deg,
    hsl(204, 76%, 70%) 0px,
    hsl(204, 76%, 70%) 105px,
    hsl(249, 76%, 70%) 105px,
    hsl(249, 76%, 70%) 210px,
    hsl(294, 76%, 70%) 210px,
    hsl(294, 76%, 70%) 315px,
    hsl(339, 76%, 70%) 315px,
    hsl(339, 76%, 70%) 420px,
    hsl(24, 76%, 70%) 420px,
    hsl(24, 76%, 70%) 525px,
    hsl(69, 76%, 70%) 525px,
    hsl(69, 76%, 70%) 630px,
    hsl(114, 76%, 70%) 630px,
    hsl(114, 76%, 70%) 735px,
    hsl(159, 76%, 70%) 735px,
    hsl(159, 76%, 70%) 840px
  );
  color: white;
  h1 {
    font-size: 4em;
  }
  overflow-x: hidden;
  .flex-grid {
    display: grid;
    grid-template-columns: 1fr;
    img {
      max-width: 100vw;
      padding: 20px;
    }
  }
  @media (min-width: 600px) {
    .flex-grid {
      grid-template-columns: 1fr 1fr;
      img {
        max-width: 50vw;
      }
    }
  }

  @media (min-width: 1200px) {
    .flex-grid {
      grid-template-columns: 1fr 1fr 1fr;
      img {
        max-width: 33vw;
      }
    }
  }
}

问题是即使我指定了宽度和高度，溢出 x 也不起作用。我找到的所有答案都说

指定宽度和高度，但是我已经做了，我仍然看到侧面滚动条

标签： javascriptcssreactjs

解决方案

你的问题不是很清楚。我不确定你是想让你的组件水平滚动还是垂直滚动。为了使组件以任何您想要的方式滚动，您必须添加一个

width和/或height包含组件的容器， overflow-x: auto如果您希望它水平滚动，则添加；overflow-y: auto如果你想让它垂直滚动；

正如您所说，您看到的是侧面滚动条，您需要添加overflow-y: hidden才能停止看到它。

在这里查看有关溢出如何工作的更多信息

推荐阅读