flex布局多层嵌套,横向滚动时,当滚动到最左边时,数据为什么不能显示完整?-灵析社区

邦纳娜娜

### 相关代码 .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; } 头部 数据1 数据2 数据3 数据4 数据5 ### 运行以上代码,能出现横向滚动条,但滚动到最左边时,为什么数据不能显示完整。 ![显示效果截图](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241123/c7f2cdb4b6db5ca5ba3b4f0dfb9c1417.png)

阅读量:14

点赞量:0

问AI
清楚明确的知道自己写的每一个css样式的作用,不写多余的样式。 在你的代码中,这些类的"flex"布局是多余的,".cmp-main \ .cmp-core \ .process-core \ .item-wrap \ .item-condition \ .condition" 移除掉这些多余的样式之后,你会看到你的item元素没有因为"width"宽度出现滚动条, "WX20231109-141608@2x.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241123/3e087f3e3dfdc4f1d0ddced8ad508ed6.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" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241123/31f885d1a239c099888e3aeb4470486b.png)