问题：overflow 和 justify-content 同时使用出现内容被裁减的问题

2023-11-03

文章目录

开发的时候遇到如下问题
原因
解决

开发的时候遇到如下问题

当给一个容器的样式同时添加 justify-content :center 和 overflow-x: auto 属性，当内容长度超过容器的长度的时候会出现左侧内容被裁剪的问题。

<style>
    .prop-list {
      width: 500px;
      height: 100px;
      background: rgba(167, 155, 180, 0.3);
      border: 3px solid rgba(68, 203, 245, 0.3);
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      overflow-x: auto;
      margin: auto;
    }
    .prop-item {
      min-width: 70px;
      height: 70px;
      margin: 0 10px;
      background-color: lightcyan;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      text-align: center;
      line-height: 70px;
      font-size: 20px;
      font-weight: 900;
    }
  </style>
  <body>
    <div class="prop-list">
      <div class="prop-item">1</div>
      <div class="prop-item">2</div>
      <div class="prop-item">3</div>
      <div class="prop-item">4</div>
      <div class="prop-item">5</div>
      <div class="prop-item">6</div>
      <div class="prop-item">7</div>
      <div class="prop-item">8</div>
    </div>
  </body>

效果：
在这里插入图片描述

原因

设置 justify-content :center 使元素居中，超过容器的地方会被认为成是溢出，再结合 overflow-x: auto ，右侧超出容器的地方会被滚动条滚动显示，但是左侧的地方已经被 “裁剪了”,无法显示。
在这里插入图片描述

解决

既然是因为元素居中导致元素被隐藏，那就不在 prop-list 容器上使用overflow-x: auto;了，可以在 prop-list 容器外面再套一层容器 prop-container 实现 overflow-x: auto;作为可视区域的容器， prop-list 容器则作为被滚动显示的容器，此时 prop-container 容器的子元素默认从左边开始显示，就不会有因为子元素剧中导致的裁切问题了。

原理：
实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .prop-container {
      width: 500px;
      overflow-x: auto;
      margin: auto;
    }
    .prop-list {
      min-width: 500px;
      height: 100px;
      background: rgba(167, 155, 180, 0.3);
      border: 3px solid rgba(68, 203, 245, 0.3);
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .prop-item {
      /* 需要设置下，要不然会强制压缩 */
      min-width: 70px;
      height: 70px;
      margin: 0 10px;
      background-color: lightcyan;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      text-align: center;
      line-height: 70px;
      font-size: 20px;
      font-weight: 900;
    }
  </style>
  <body>
    <div class="prop-container">
      <div class="prop-list">
        <div class="prop-item">1</div>
        <div class="prop-item">2</div>
        <div class="prop-item">3</div>
        <div class="prop-item">4</div>
        <div class="prop-item">5</div>
        <div class="prop-item">6</div>
        <div class="prop-item">7</div>
        <div class="prop-item">8</div>
      </div>
    </div>
  </body>
</html>

效果

啊哦，还是被裁剪了。这是神什么原因呢？这个因为设置 prop-list 容器display: flex; 那么容器的默认宽度就是父元素 prop-container 的宽度（符合默认的block属性），然后设置子元素居中显示，所以还是会被裁剪。

解决：
设置 prop-list 容器 display: inline-flex; 那么 prop-list 容器就符合inline-block属性，宽度是被子元素撑开的。
效果：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

壹囝臜＋

html