关于栅栏系统配合overflow-x不生效 无法横向滑动

Question

问题描述

没想到有一天会在这么基础的地方卡这么久...还没有解决...还得麻烦大哥们帮我看看...

问题出现的环境背景及自己尝试过哪些方法

已经设置了宽度、overflow 也清除了浮动 就是不知道为什么没有效果 实在是找不到原因了

相关代码

一些不想关的代码会省略 忘谅解. 栅栏系统以24为准

//html
<div className="dashboard">
    //...
    <Row className="dashboard-list"> 
        <Col span={4}>
          <Card title="xxx" className="dashboard-active">
            <p>{moneyLargeFormat(700000)}</p>
          </Card>
        </Col>
        //Card组件 * 7
    </Row> 
    //...
</div>

//css
.dashboard {
    overflow: hidden;
    margin: 40px 0;
}
.dashboard .dashboard-list {
    width: 95%; 
    overflow: scroll;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px;
    clear: both;
}
.zent-col-4 {
  width: 16.66667%;
}
.zent-col {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.zent-row:after {
    content: "";
    display: table;
    clear: both;
}

你期待的结果是什么？实际看到的错误信息又是什么？

折腾得接近崩溃 望...大哥指点迷津 谢谢

Answer 1

flex？ 设置wrap为no-wrap，然后给每个item一个最小宽度，试试