html - 溢出-x 仅在具有固定高度和未知数量的子元素的父 div 上滚动

Question

如果我有一个父子div：

<div class="parent">
    <div class="content child">1</div>
</div>

父 div 有：

• 一个固定的高度（刚好超过一个孩子的高度）
• 最大宽度（一些 %）

内容子项将是：

• 都一样大小
• 从一个孩子开始
• 将添加更多的孩子，但每个孩子都在最后一个孩子的右边，因此，只允许 x 滚动

父母和每个孩子需要什么 CSS？

这是我最好的尝试。

Answer 1

要将所有元素放在一行中，您需要使子元素显示 inline-block 并禁用父元素上的空白换行

.parent {
    max-width: 50%;
    overflow-x: scroll;
    white-space: nowrap;
}

.content {
    display: inline-block;
}

示例小提琴

Answer 2

使用弹性盒：

.parent {
    display: flex;
    overflow-x: scroll;
}

.content {
    display: block;
}