Html 单个列的CSS使用水平滚动进行滚动

我正在构建一个包含信息列的UI组件。每个列都需要单独滚动。我以前在SO.com上发现过这一点，但我很难将其与另一个要求相协调——页面水平滚动以显示屏幕上不适合的列

我有水平滚动工作，但不能让它与单独的列滚动一起工作。守则：

#board {
    float: left;
    height: 98%;
    max-height: 98%;
    width: 4300px; /*smaller than columns to force horizontal scroll */
    margin: auto;
    border: none;
    overflow-x: scroll;
}

#columns {
    height: 98%;
    float: left;
    width: 4800px; /* need this much width */
    margin: auto;
    border: none;
    overflow-x:auto;
}

.column {
    float: left;
    padding-bottom: 50px;
    width: 240px;
    height: 100%;
    max-height: 100%;
    padding: 5px;
    padding-bottom: 100px;
    margin-left: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

<div id="board">
    <div id="columns">
        <div id="col1" class="column">
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
        </div>
        <div id="col2" class="column">
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
            <div class="card"> ...content... </div>
        </div>
        <!-- 12-16 more columns -->
    </div>
</div>

#板{
浮动：左；
身高：98%；
最高高度：98%；
宽度：4300px；/*小于列以强制水平滚动*/
保证金：自动；
边界：无；
溢出-x：滚动；
}
#纵队{
身高：98%；
浮动：左；
宽度：4800px；/*需要这么大的宽度*/
保证金：自动；
边界：无；
溢出-x：自动；
}
.栏目{
浮动：左；
填充底部：50px；
宽度：240px；
身高：100%；
最大高度：100%；
填充物：5px；
填充底部：100px；
左边距：5px；
溢出y：自动；
溢出x：隐藏；
}
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。

---

编辑以修复html中id与类的问题。

我试图简化您的代码，使其只包含解决问题所需的内容，但它应该可以工作。CSS中也有一些错误：您有一个用于

#boards

的样式，但是外部容器有一个class

boards

而不是id，您有一个用于

#columns

的样式，但是中间内部容器的id是

positions

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
.董事会{
身高：100%；
宽度：200px；
溢出-x：滚动；
}
#纵队{
身高：100%；
宽度：500px；
空白：nowrap；
}
.栏目{
垂直对齐：顶部；
身高：100%；
显示：内联块；
宽度：150px；
溢出y：自动；
溢出x：隐藏；
}
.卡片{
高度：200px；
背景：#F00；
边缘底部：5px；
}

…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。
…内容。。。

谢谢@sean的快速回复。对错误也很抱歉，我花了太少的时间将我的具体问题概括为更一般的问题。这需要html、正文定义吗？询问，因为我的代码的顶部div位于更大框架中的DOM树下。我做了检查，以确保没有影响DOM这一部分的js。它不一定需要

html，body

定义，但我认为重要的是，这一部分有一个设置的高度，可以用作其百分比高度的基础。因此，如果您将它们放在具有绝对高度的容器div中，则应该可以，但如果所有内容都是百分比，则需要设置

html，body

高度。如果不这样做，文档高度将扩展以适应列，整个页面将滚动，而不是单独滚动每一列。