CSS Fixed position inherit width not equal to parent

user_12937443 0
Viewed 345

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 :

enter image description here

Here's what i'm looking for.

enter image description here

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 Résultats de traduction 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>

css html
1 Answers

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;
    }
user_124880340
Related