css - 在父 div 中添加垂直子 div(均为固定宽度)，父级具有动态水平滚动条

Question

我正在尝试添加一个布局，其中父 div 具有包含子列(作为 div)的固定宽度。固定宽度的子项可以动态添加和删除，但是，如果固定宽度的父 div 中容纳的子项​​数量多于固定宽度的父级 div，我希望显示一个水平滚动条。但我无法让它工作。

JSFIDDLE:jsfiddle

.newFilterItemsBox {
    padding: 5px;
    width: 690px;
    height: 572px;
    border-color: rgba(0, 0, 0, 0.1);
    border-width: 2px;
    border-style: solid;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    flex-direction: column;
    display:flex;
    overflow:hidden;
    background-color: white;
}
.newFilterSelectionColumnContainer {
    width: 685px;
    position: relative;
    top: 25px;
    left:-4px;
    height: 500px;
    border-top-color: rgba(0, 0, 0, 0.1);
    border-top-width: 2px;
    border-top-style: solid;
    overflow-x: scroll;
    overflow-y: hidden;
}
.newFilterSelectionColumn {
    border-right: 1px solid lightgray;
    height: 508px;  
    width: 200px;
    float:left;
    overflow-y:auto;
    z-index:100000;
}

Answer 1

添加display: flex;到.newFilterSelectionColumnContainer