Floc February 2016

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

Answers


Karl Dawson February 2016

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.


GMchris February 2016

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


Marcos Pérez Gude February 2016

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 Som 


Chris February 2016

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


DaMaxContent February 2016

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

Post Status

Asked in February 2016
Viewed 2,207 times
Voted 9
Answered 5 times

Search




Leave an answer