没有固定高度的水平滚动div，所有包含的div都是最高孩子的高度

Question

JSFiddle：Example

我正在寻找一种方法让容器 div 的高度等于其最高的孩子。

每个其他孩子的大小都应与容器的高度一致。

如果子项超出其宽度，我还需要容器水平滚动。

到目前为止，我已经尝试过使用 inline-block 和 float: left 但没有得到我想要的结果。设置高度：100% 对孩子也没有预期的效果。在容器上使用 overflow: auto 仍然将最后一个元素包裹到下一行。

我非常有信心，我可以使用 JavaScript 通过抓取最高孩子的高度并适当调整大小并在容器上设置固定高度来实现这一点。不过我宁愿不使用 JavaScript，而且我认为这可能只是使用 CSS 技巧。

HTML

<div>
    <div class='boxed'><ul><li>1</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>

<div class='container'>
    <div class='boxed'><ul><li>1</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li><li>3</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>

CSS

.boxed { display: inline-block; border: 1px solid black; }

.container { overflow-x: auto; }

Answer 1

对于第一个问题，您可以将元素设为 display:table-cell，而不是 inline-block。这将导致它们采用最高兄弟元素的高度。我还建议将vertical-align:bottom 添加到元素中，以便将它们与父元素的底部对齐。如果这不是您想要的行为，那么还有middle 和top。

UPDATED EXAMPLE HERE

.boxed {
    border: 1px solid black;
    display:table-cell;
    vertical-align:bottom;
}

对于第二个问题，只需在父元素中添加white-space:nowrap 即可防止子元素换行。当子元素超过父元素的宽度时，将创建一个水平滚动条。

.container {
    border:1px solid red;
    white-space:nowrap;
    overflow-x: auto;
}