当元素的父级溢出时，使元素的宽度拉伸以适合其子级:auto; [英] Make element width stretch to fit its children when element's parent has overflow: auto;

问题描述

在这个简化的示例中，我有一个书架，书坐在书架上.书柜是最外面的元素，具有定义的宽度.书架上的书应该从左到右显示而没有包裹.该书架应该伸展其宽度以在其书架上显示所有书籍.所有书架的宽度都必须相同，即最宽的书架的宽度.

In this simplified example, I have a bookcase with books sitting on bookshelves. The bookcase is the outermost element with a defined width. The books on a bookshelf are supposed to appear left to right without wrapping. The bookshelf is supposed to stretch its width to show all the books on its shelf. All bookshelves need to be the same width, the width of the widest bookshelf.

我的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演示

jsFiddle demo

当前代码的问题是，当书架的宽度小于最长的书架的宽度，并且书架使溢流区可滚动时，书架的元素无法拉伸以适合所有书本.目前，书架似乎正在定义其宽度，使其等于父书架(书架)的宽度.

The problem with the current code is that when the bookcase width is smaller than the longest bookshelf and the bookcase makes the overflow scrollable, the bookshelf elements don’t stretch to fit all the books. Currently the shelves appear to be defining their width equal to the parent, the bookcase.

这些图片说明了问题.这是书架的正常外观，很好:

These pictures illustrate the problem. This is how the bookcase looks normally, which is fine:

或者

但是当在狭窄的书架中向右滚动时，书架的绿色背景被切除，而不是到达最后一本红色书本的右侧:

But when you scroll right when the bookcase is narrow, the bookshelves’ green background is cut off, instead of reaching to the right side of the last red book:

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

How can I make the bookshelves take the full width of the overflowed element, rather than the width of the bookcase parent container?

推荐答案

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

Thanks to Javalsu, Hashem Qolami, and Danield for helping me find a suitable solution. Indeed, the trick is to utilize inherent display properties of tables. The solution I found was to wrap the .bookcase in another element (I'm calling this wrapper element the .wall). Move the overflow: auto; with the static height: and width: properties from the .bookcase to the .wall, and add display: table; and width: 100%; to the .bookcase.

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

The display: table; property is needed for when overflow is scrolling, and the width: 100%; is needed for when the overflow is not scrolling.

我的新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演示

jsFiddle demo

结果:
或者

Result:
or

这篇关于当元素的父级溢出时，使元素的宽度拉伸以适合其子级:auto;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！