css - 当元素的父元素溢出时，使元素宽度拉伸以适应其子元素：auto;

Question

在这个简化的例子中，我有一个书柜，书架上放着书。书柜是具有定义宽度的最外层元素。书架上的书应该从左到右出现，没有包装。书架应该伸展它的宽度以显示其架子上的所有书籍。所有书架的宽度必须相同，即最宽书架的宽度。

我的 HTML：

<div class="bookcase">
    <div class="bookshelf">
        <div class="book">
        <div class="book">
        <div class="book">
    </div>
    <div class="bookshelf">
        <div class="book">
        <div class="book">
        <div class="book">
        <div class="book">
    </div>
    <div class="bookshelf">
        <div class="book">
    </div>
</div>

我的 CSS：

.bookcase {
    width: 40%;
    height: 300px;
    margin: 0 auto;
    background: lightgrey;
    overflow-x: auto;
}
.bookshelf {
    background: lightgreen;
    white-space: nowrap;
}
.book {
    display: inline-block;
    height: 60px;
    width: 60px;
    background: pink;
}

jsFiddle 演示

当前代码的问题是，当书架宽度小于最长书架并且书架使溢出可滚动时，书架元素不会拉伸以适应所有书籍。目前，书架似乎将它们的宽度定义为等于父书柜。

这些图片说明了这个问题。这是书柜的正常外观，很好：

或者

但是当你在书柜狭窄的情况下向右滚动时，书架的绿色背景会被切断，而不是到达最后一本书的右侧：

如何让书架占据溢出元素的整个宽度，而不是书柜父容器的宽度？

Answer 1

感谢 Javalsu、Hashem Qolami 和 Danield 帮助我找到合适的解决方案。事实上，诀窍是利用表格的固有显示属性。我找到的解决方案是将 包装.bookcase在另一个元素中（我称这个包装元素为.wall）。将overflow: auto;具有静态height:和width:属性的移动.bookcase到.wall，然后将 和display: table;添加width: 100%;到.bookcase。

当溢出滚动时需要该display: table;属性，当溢出不滚动时需要该属性width: 100%;。

我的新 HTML：

<div class="wall">
    <div class="bookcase">
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
        </div>
    </div>
</div>

我的新 CSS：

.wall {
    width: 60%;
    height: 300px;
    margin: 0 auto;
    background: lightgrey;
    overflow: auto;
}
.bookcase {
    display: table;
    width: 100%;
}
.bookshelf {
    background: lightgreen;
    white-space: nowrap;
}
.book {
    display: inline-block;
    height: 60px;
    width: 60px;
    background: pink;
}

jsFiddle 演示

结果：
或

Answer 2

添加display:table.bookcase 元素几乎可以满足您的需求。

小提琴

唯一的区别是，当最长书架 > 视口宽度的 60% 时出现滚动条，而不是在最长书架 > 视口宽度的 100% 时出现。

但是背景消失的问题已经消失了。

Answer 3

您的问题是您已经在 .bookcase 上声明了一个宽度，并且每个书架都将继承该宽度。如果您希望书柜和每个书架始终是最宽书籍的宽度，请在 .bookcase 上设置 display: inline-block，并删除其宽度规则。如果你需要它居中，你需要找到除 margin: 0 auto 以外的方法。