CSS Fixed position inherit width not equal to parent

Question

I have 3 divs parent, child and element. the div element has a width inherited from the child. The problem is the child div has a width equals to 100% and the element has width equals to inherit which gives me that :

Here's what i'm looking for.

i tried diffrent ways. but no ones works. and i can't get it why the element couldnt inherit the width 200px from the parent div.

404 / 5000 I have 3 parent, child and element divs. the div element has a width inherited from the child, the problem is that the child div has a width of 100% and the element inherits from (100%) and applies it which gives me this /

here's my code :

.parent{
  padding: 2px;
  height:100px;
  width:30%;
  border:solid 2px red;
}
.child{
  padding: 2px;
  border:solid 2px green;
  width:100%;
  height:50px;
  position:relative;
}

.element1{
  padding: 2px;
  width:inherit;
  border:solid 2px yellow;
  position:fixed;
}

<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1  
  </div>
  </div>
</div>

you don't inherit the computed pixel value, you inherit the 100% and you apply 100% to that element which will give you a different result — Temani Afif, Sep 23 '21 at 20:14
@TemaniAfif that's the problem, is there any way to inherit the computed pixel — DEV, Sep 23 '21 at 20:28
Are you able to simply remove the `position: fixed`- feels like using a pull wagon instead of a dump truck to haul several yards of dirt. — Mark Schultheiss, Jan 04 '23 at 21:20

score 1 · Answer 1 · answered Sep 23 '21 at 20:20

1

this is no the correct approach to inherit unless parent width is 100%. But this code fixes your issue by applying width inherit on child and element.

  .parent {
        padding: 2px;
        height: 100px;
        width: 200px;
        border: solid 2px red;
    }

    .child {
        padding: 2px;
        border: solid 2px green;
        width: inherit;
        height: 50px;
        position: relative;
    }

    .element1 {
        padding: 2px;
        width: inherit;
        border: solid 2px yellow;
        position: fixed;
    }

answered Sep 23 '21 at 20:20

huzzzus

172
10

2

the problem is that the parent can have a width like 70%. and i will still face this problem – DEV Sep 23 '21 at 20:25
2

Width: inherit copies the exact expression, not the value. If the parents width is 100% of the screen, the child copies the whole parent width behavior, not the 100% value from parent. So width inherit on child will copy the complete behavior of parent, if its expanding 50% on screen, the child will do the same. To fix this you have to explicitly define width on parent element. – huzzzus Sep 23 '21 at 20:38

score 1 · Answer 2 · answered Jan 04 '23 at 21:15

This is not possible with CSS alone, but can easily be accomplished using a few lines of JavaScript.

Steps

Listen for window resize events.
Upon resize get the parent element's width (in px) using the clientWidth or offsetWidth property.
Set the fixed position child elements width.
Apply any manual offsets to account for padding/borders/etc. Note: In this example I also set box-sizing: border-box; to reduce the number of required offsets.

Window Resize Events

clientWidth vs offsetWidth

 function windowResized() {
    const child = document.querySelector(".child");
    document.querySelector(".element1").style.width = `${child.clientWidth-4}px`;
    // 4px = 2*2px child padding (right/left)
  }
 
 window.addEventListener("resize", windowResized);
 windowResized();

.parent{
  padding: 2px;
  height: 100px;
  width: 30%;
  border: solid 2px red;
}

.child{
  padding: 2px;
  border: solid 2px green;
  height: 50px;
  position: relative;
}

.element1{
  padding: 2px;
  border: solid 2px yellow;
  position: fixed;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1  
  </div>
  </div>
</div>

score 0 · Answer 3 · answered Jan 04 '23 at 21:45

This is not specifically what you are asking but the visual you asked for it does provide. I used border-box to keep things constrained in the parents box.

.parent {
  padding: 2px;
  height: 100px;
  width: 30%;
  border: solid 2px red;
}

.child {
  box-sizing: border-box;
  padding: 2px;
  border: solid 2px green;
  width: 100%;
  height: 50px;
}

.element1 {
  box-sizing: inherit;
  padding: 2px;
  width: inherit;
  border: solid 2px yellow;
}

<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1
    </div>
  </div>
</div>

CSS Fixed position inherit width not equal to parent

3 Answers3