子元素 100% 宽度的父元素溢出：滚动答案

【问题标题】：Child element 100% width of it's parent with overflow: scroll子元素 100% 宽度的父元素溢出：滚动
【发布时间】：2021-10-18 19:34:13
【问题描述】：

我正在寻找一种解决方案，使子元素的宽度达到其父元素的 100%。

问题：父母有overflow-x: scroll。文本将插入一个滚动条。现在我想让一个孩子获得它的容器的（新的）宽度。

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

width: 100% 只会将其设置为容器的初始状态宽度。

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

【问题讨论】：

标签： css

【解决方案1】：

我知道有人告诉它不要使用更多的 HTML 标记，但是选择的答案有一些问题，例如，如果您扩展了父级的文本，或者您更改了 font-size 属性，选择的解决方案将不起作用，因为它正在使用静态 330px 进行计算！

所以我决定发布我认为更好的解决方案：

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  padding: 40px 20px;
}

.parent > .content-wrapper {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
}

.parent > .content-wrapper > .child {
  background: springgreen;
  white-space: normal;
}

<div class="parent">
  <div class="content-wrapper">
     This is some very very very very very long text to extend .parent div horizontaly, in      order to see .child divs extending
    
    <div class="child">
      This .child div should extend horizontaly
    </div>
  </div>
</div>

我们可以创建另一个包含文本（上例中为.content-wrapper）的div，而不是将文本直接放入div .parent。

然后我们可以在这个新的 div 中使用 'display: inline-block'，使其尊重其内容宽度，而不是父级的！

...换句话说...

通过将 display: inline-block 添加到 .content-wrapper，它将强制该 div 具有其中最大水平内容的宽度，在我们的案例，文字！

现在如果我们在新的 .content-wrapper 中添加 .child div，.child 将自动填充 .content-wrapper 的整个宽度，即使不使用 'width: 100% '，因为每个 div 元素默认都有 'display: block'，这使得它们具有其父元素的宽度。

我们还应该在 .content-wrapper 中使用 'min-width: 100%'，只是防止它的宽度小于 .parent 的宽度，如果文本宽度小于 .parent 的宽度。

【讨论】：

【解决方案2】：

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

不滚动：

.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;
}

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

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

滚动：

.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;
}

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

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

每个中的 calc() 语句需要是填充值的 2 倍。

【讨论】：

您还应该知道the browser support of calc()。许多 Android 手机不支持它。
我还没用过calc()。效果很好！但可悲的是，许多机器人不支持它......

【解决方案3】：

我正在寻找一种解决方案，使子元素的宽度达到其父元素的 100%

.parent {
    position: relative;
}
.child {
    position: absolute;
}

这应该可以解决它。但请注意，父宽度为 350 + 20 左内边距 + 20 右内边距，因此子级宽度仅为 390px。

【讨论】：