问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex布局多层嵌套，横向滚动时，当滚动到最左边时，数据为什么不能显示完整？

头像
1302019
    2
    新手上路，请多包涵

    相关代码

    <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .container {
        margin: 80px;
        width: auto;
      }
      .cmp-main {
        display: flex;
        overflow: auto;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
      }
      .cmp-core {
        background-color: #f5f5f7;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .process-core {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .item-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
      }
      .item {
        width: 230px;
        margin-top: 5px;
        cursor: pointer;
        border: 1px solid white;
        background-color: white;
        border-radius: 0 0 6px 6px;
      }
      .item-condition {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .condition {
        position: relative;
        display: flex;
      }
      .condition .item-wrap {
        position: relative;
        display: flex;
        flex-direction: row;
      }
      .condition .item-wrap .item {
        position: relative;
        display: flex;
        width: 500px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cmp-main">
        <div class="cmp-core">
          <div class="process-core">
            <div class="item-wrap">
              <div class="item">头部</div>
            </div>
            <div class="item-wrap">
              <div class="item-condition">
                <div class="condition">
                  <div class="item-wrap">
                    <div class="item">数据1</div>
                    <div class="item">数据2</div>
                    <div class="item">数据3</div>
                    <div class="item">数据4</div>
                    <div class="item">数据5</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>    
  </body>
</html>

    运行以上代码，能出现横向滚动条，但滚动到最左边时，为什么数据不能显示完整。

    显示效果截图

    html5csshtml
    阅读 799
    avatarAI BotBETA

    看起来你的问题是在横向滚动条滚动到最左边时，数据没有完全显示。这可能是由于浏览器或某些CSS样式设置的限制。

    一种可能的原因是，由于元素的宽度被设置为固定的230px，当它们被包装在一个flex容器中并尝试在单列中显示时，如果宽度超过容器宽度，这些元素可能会溢出并导致横向滚动条的出现。然而，当滚动条滚动到最左边时，由于每个元素的宽度是固定的，可能仍然有一些空间没有完全利用，这可能导致一些数据无法完全显示。

    要解决这个问题，你可以尝试调整元素的宽度，或者更改flex容器的wrap属性为"wrap"，这会使得元素在空间不足时换行显示。你还可以尝试使用flex布局的justify-content属性来对齐元素，以确保它们在横向滚动条滚动到最左边时完全可见。

    例如，你可以尝试将.item-wrap的flex-direction属性设置为"row"，并将.item的宽度设置为"auto"，这将使得每个元素尽可能地占据更多的空间，从而减少未使用的空间。同时，你还可以将.cmp-main的align-items属性设置为"flex-start"，以确保所有元素都向左边对齐。

    希望这些建议能帮助你解决问题！如果你还有其他问题或需要进一步的帮助，请随时提问。

    1 个回答
    得票最新
    头像
    hboot
      687

      清楚明确的知道自己写的每一个css样式的作用，不写多余的样式。

      在你的代码中，这些类的flex布局是多余的，.cmp-main \ .cmp-core \ .process-core \ .item-wrap \ .item-condition \ .condition

      移除掉这些多余的样式之后，你会看到你的item元素没有因为width宽度出现滚动条，

      WX20231109-141608@2x.png

      这是由于.condition .item-wrap 设置的flex布局导致的，宽度不会超过父元素宽度，自动缩小，修改你的css，在flex布局中，设置子元素的固定宽度通过属性flex控制

      .condition .item-wrap .item {
  position: relative;
  display: flex;
  flex: 0 0 500px;
  height: 100px;
  border: 1px solid red;
}

      可以看到width:500px改成了flex:0 0 500px, 0 0 表示元素不会放大，也不会缩小。

      在此查看页面可以看到页面滚动条已经正常了。

      此时有个问题，就是头部会跟着滚动，因为你的滚动轴是.container出现，修改超出部分的父元素condition

      让下方的数据出现滚动，头部则固定不动。

      .condition {
  position: relative;
  overflow: auto;
}

      然后再设置头部局中。直接修改.item-wrap会污染下面同类名的元素样式。

      .process-core > .item-wrap:first-child {
  display: flex;
  justify-content: center;
  text-align: center;
}

      这样我们只控制第一个.item-wrap的样式
      WX20231109-142714@2x.png

      查看全部 1 个回答
      推荐问题
      宣传栏