当元素的父元素溢出时，使元素宽度拉伸以适合其子元素：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 demo

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

这些图片说明了这个问题。这就是书柜看起来正常的方式，这很好：

要么

但是当书柜缩小时向右滚动时，书架的绿色背景会被切断，而不是到达最后一本红皮书的右侧：

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

Answer 1

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

当溢出滚动时需要.bookcase属性，而当溢出不滚动时需要display: table;。

我的新HTML：

width: 100%;

我的新CSS：

<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>

<强> jsFiddle demo

结果：
要么

Answer 2

在.bookcase元素上添加display:table 几乎你需要的东西。

<强> FIDDLE

唯一的区别是，当最长的书架＆gt;出现时，不会出现滚动条。视口宽度的60％，它们出现在最长的书架上时> 100％的视口宽度。

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

Answer 3

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