html - Overflow-x 仅在具有固定高度和未知数量的子级的父级 div 上滚动

Question

如果我有父子 div:

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

父 div 有:

• 固定高度(刚好超过一个 child 的高度)
• 最大宽度(一些百分比)

内容 child 将是:

• 大小都一样
• 从一个 child 开始
• 将添加更多子项，但每个子项都位于最后一个子项的右侧，因此，只允许 x 滚动

父级和每个子级需要什么 CSS？

这是一个fiddle尽我最大的努力。

Answer 1

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

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

.content {
    display: inline-block;
}

Example fiddle