Width inherit on fixed div doesn't work

问题:

First, here is an example of what I have. https://jsfiddle.net/1xyofup5/

Html code :

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

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

I can't change the html structure and I can only edit .container > div and .container > div > .fixed rules.

How can I make the fixed div fit the width of his parent ? The inherit doesn't work.

Thanks !

回答1:

w3schools.com on the inherit property:

The inherit keyword specifies that a property should inherit its value from its parent element.

and MDN:

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

For inherited properties, this reinforces the default behavior, and is only needed to override another rule. For non-inherited properties, this specifies a behavior that typically makes relatively little sense and you may consider using initial instead, or unset on the all property.

Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

In your case, the inherited value to fixed is not what you want because its' direct parent (.container > div) doesn't have a a width set, and so it gets the default value of auto.

I see two simple solutions:

Option 1

Inherit the width throughout all children. So add this:

.container > div {
  width: inherit;
}

That way, the width of container will be inherited twice down to the fixed element.

Option 1 demo

---

Option 2

Give .container > div its' own width:

.container > div {
  width: 300px;
}

Option 2 demo

回答2:

You can fix it defining a width in the parent, so:

.container {
  height: 100%;
  position: absolute;
}

.container > div {
    width: 340px;
    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;
    box-sizing:border-box;
}

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

See your fiddle edited:

https://jsfiddle.net/1xyofup5/1/

I've defined the .container > div with a width that's will be inherited by .fixed. See box-sizing property to lead with paddings.

回答3:

There are many ways to fix this.

The simple fix is to add width:inherit to the parent div:

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

What is wrong with your snippet is that the inherit value takes the value of the parent. In the parent of your snippet, you do not have a width defined, so it is the CSS default of width:auto

you can also specify the width in the parent div to be like:

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

you can also specify the width of .fixed, but I am sure that is not what you want to do

回答4:

All divs leading up to the fixed one should have width: inherit.

回答5:

inherit doesn't work like you say, so just explicitly set it:

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

The width is adjusted for your padding. I've added the negative margin purely to line up the red and green borders.