526互联

滚动条无法滚动到最前面或最末尾问题

发布时间 2023-06-29 18:21:38作者: 保洁叔叔

问题描述：div使用display: flex;justifyContent: center;属性后，页面内容溢出显示滚动条，内容无法滚动完整。

解决办法：

<div class="container">
  <div class="content-wrapper">
    <!-- 这里是你的内容 -->
  </div>
</div>

.container {
  width: 100%;
  overflow-x: scroll;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  min-width: fit-content;
}
//fit-content将让包含溢出内容的 <div> 元素的宽度根据其内容自适应，而不会被设为容器的宽度。通过这样的设置，即使内容超出容器的宽度，滚动条也可以滚动到内容的最前面。