Width Inherit On Fixed Div Doesn't Work

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

Some cont

Solution 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

Solution 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><divclass="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><divclass="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.

Solution 3:

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

Solution 4:

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.

Share