html - 即使我为父级 div 设置了固定宽度，水平滚动条也不起作用？

Question

如问题所述，我的水平滚动条不工作，我正在开发一个 react 应用程序，我正在尝试构建一个小的 TableData 组件，这是我呈现的 jsx 代码:

<table>
        <div className="co-table">
                <div className="co-table__long">
                    <div className="co-table__header">
                        <div className="co-table__header--col">
                            {" "}
                            <span>Date d'operation</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Type de Mouvement</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Montant ($$) </span>{" "}
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                </div>
            </div>
</table>

我知道它有很多代码但是它是重复的代码，我会详细解释我想要实现的，这是我的 SASS 文件:

.co-table {
width:300px;
height: 150px;


&__long {
    width: 300px;
    height: 150px;
    overflow-x: scroll;
    &:after {
        content: "";
        clear: both;
    }
}

&__header {
    display:inline-block;
    width:100px;
    height: 150px;
    float: left;

    &--col {
        width:100px;
        height: 50px;
        background: #333;
        color:white;
        span {
            font-size:13px;
            padding:10px 0;
        }
    }
}


&__corps {
    display:inline-block;
    float: left;
    height: 150px;
    &--head {
        width:60px;
        height: 150px;
        background:lightgray;
        float: left;

    }
    &--row {
        float: left;
        width:100px;
        height: 150px;
    }
    &--column {
        width:100px;
        height: 50px;
        border:1px solid lightblue;
    }
}

&:after {
    content: "";
    clear:both;
}


}

正如您在我的 SASS 文件中看到的那样，我正在尝试将水平滚动条添加到带有 **** co-table__long **** 类的 div 但它不起作用，那个 div 有它的子元素和它们的总宽度超过 700 像素，我将我的父级宽度固定为 300 像素，这样我就可以看到水平滚动条。我看到的是垂直滚动条，我也看到水平滚动条，但不起作用。

这是我要找的:

这是我工作的链接，我希望它能起作用:

https://codesandbox.io/s/y03696lrl9

如有任何帮助，我们将不胜感激。

Answer 1

从此更改“co-table__long”的 css:

.co-table__long {    
    height: 150px;
    overflow-x: scroll;
}

进入这个:

.co-table__long {    
    max-width: 300px;
    height: 150px;
    overflow: auto;
}

您需要在使用“溢出”的元素中设置“宽度/最大宽度”

check this codesandbox link