固定 div 上的宽度继承不起作用

Question

首先，这是我所拥有的一个例子。 https://jsfiddle.net/1xyofup5/

html代码：

<div>
  <div class="container">
    <div>
      <div>
        Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content 
      </div>
      <div class="fixed">
        Other content
      </div>
    </div>
  </div>
</div>

CSS 代码：

.container {
  width: 350px;
  height: 100%;
  position: absolute;
}

.container > div {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 50px);
    border: 1px solid red;
}

.container > div > .fixed {
    padding: 10px;
    position: fixed;
    bottom: 0;
    background-color: white;
    border: 1px solid green;
    width: inherit;
}

我无法更改 html 结构，我只能编辑.container > div和.container > div > .fixed规则。

我怎样才能让固定的 div 适合他父母的宽度？该inherit不起作用。

谢谢 ！

Answer 1

w3schools.com上的inherit财产：

inherit 关键字指定属性应从其父元素继承其值。

和MDN：

继承 CSS 值会导致指定它的元素从其父元素中获取属性的计算值。每个 CSS 属性都允许使用它。

对于继承的属性，这加强了默认行为，并且只需要覆盖另一个规则。对于非继承属性，这指定了一种通常意义相对较小的行为，您可以考虑使用 initial 代替，或在 all 属性上取消设置。

继承总是来自文档树中的父元素，即使父元素不是包含块。

在您的情况下， to 的继承值fixed不是您想要的，因为它的直接父级 ( .container > div) 没有 aawidth集，因此它获得auto.

我看到两个简单的解决方案：

选项1

继承所有孩子的宽度。所以添加这个：

.container > div {
  width: inherit;
}

这样，宽度container将向下继承两次到fixed元素。

选项 1 演示

选项 2

给.container > div它自己的宽度：

.container > div {
  width: 300px;
}

选项 2 演示