子元素是其父元素的100％宽度，并带有溢出：滚动 [英] Child element 100% width of it's parent with overflow: scroll

问题描述

我正在寻找一种解决方案，以使子元素成为其父元素的100％宽度。

I'm searching for a solution to get the child element 100% width of it's parent.

问题：父元素有个溢出-x：滚动。文本将插入一个滚动条。现在，我希望孩子获得容器的（新）宽度。

The problem: The parent has overflow-x: scroll. Text will insert a scrollbar. Now I want a child to get (the new) width of it's container.

要求：纯CSS解决方案；没有进一步的HTML标记；没有固定宽度。

Requirements: Pure CSS solution; no further HTML markup; no fixed width.

宽度：100％只会将其设置为容器的初始状态宽度。

width: 100% will set it only to the init state width of the container.

这里是一个小提琴： https://jsfiddle.net/y166e3nb /

推荐答案

我不确定您是否希望孩子成为不滚动或不滚动的宽度，所以我想出了两个：

I wasn't sure if you wanted the child to be the width without scrolling or with scrolling, so I came up with both:

没有滚动：

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>
.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width: calc(100% + 40px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

https://jsfiddle.net/y166e3nb/2/

滚动显示：

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>
.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width:calc(100% + 330px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

https://jsfiddle.net/y166e3nb/3/

每个中的calc（）语句必须为2x填充的值。

The calc() statement in each needs to be 2x the value of the padding.

这篇关于子元素是其父元素的100％宽度，并带有溢出：滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！