I have a child element with an absolute position, my task is to make this child fit parent height and move it relative to parent border.

Here is an example, the distance between parent and grandparent border is not given (padding values are just an example)

.grand-parent {
    position: relative;
    border: solid 2px blue;
    display: flex;
    flex-flow: column;
    width: 100px;  // this value is just an example
    height: auto;
    padding: 40px; // this value is just an example, it could be anything or changed any time
  }

  .parent {
    position: relative;
    display: inline-block;
    border: solid 2px red;
  }

  .child {
    position: absolute;
    height: 100%;
    width: 15px;
    right: 0;
    top: 0;
    transform: translateX(30px);
    background-color: #00c391;
  }
  .expected{
      transform: translateX(59px);
  }

<div style="display: flex">
  <div >
    <div >
      this is a paragraph of parent element
      <div ></div>
    </div>
  </div>

  <h2>Expected output</h2>

  <div >
    <div >
      this is a paragraph of parent element
      <div ></div>
    </div>
  </div>
</div>

 

Note that parent and grandparent are responsive, so no fixed measure can be used

CodePudding user response：

Remove position:relative from the parent so that your element is placed relative to grand-parent then use clip-path on the parent to cut the non needed part:

.grand-parent {
  position: relative;
  border: solid 2px blue;
  display: flex;
  width: 100px;
  padding: 40px;
}

.parent {
  border: solid 2px red;
  clip-path: inset(0 -999vmax 0 0); /* a big negative value for the second one */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px; /* equal to the border */
  width: 15px;
  transform: translateX(100%);
  background-color: #00c391;
}

/* hover the parent to understand the trick */
.parent:hover {
  box-shadow:0 0 0 999vmax blue;
}

<h2>Expected output</h2>

<div >
  <div >
    this is a paragraph of parent element
    <div ></div>
  </div>
</div>

CodePudding user response：

So what's the problem with just making right negative?

if grand-parent is supposed to be responsive, and therefore have an variable width, then you're going to have to either do some math or figure out how to size child to the parent but position it relative to grand-parent

.grand-parent {
  position: relative;
  border: solid 2px blue;
  display: flex;
  flex-flow: column;
  width: 100px;
  height: auto;
  padding: 40px;
}

.parent {
  position: relative;
  display: inline-block;
  border: solid 2px red;
}

.child {
  position: absolute;
  height: 100%;
  width: 15px;
  right: -59px;
  top: 0;
  background-color: #00c391;
}

<div style="display: flex">
  <div >
    <div >
      this is a paragraph of parent element
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

the grand-parent's height is equal to the height of parent 40px padding top 40px padding bottom

so setting the child's height to calc(100% - 80px) would be equal to the parent's height in that case you can remove the position: relative from the parent. now the child will get to the edge of the grand parent while have the height of the parent

      
.grand-parent {
    position: relative;
    border: solid 2px blue;
    display: flex;
    flex-flow: column;
    width: 100px;
    height: auto;
    padding: 40px;
  }

  .parent {
    display: inline-block;
    border: solid 2px red;
  }

  .child {
    position: absolute;
    height: calc(100% - 80px);
    width: 15px;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    background-color: #00c391;
  }

  <div style="display: flex">
    <div >
        <div >
            this is a paragraph of parent element
            <div ></div>
      </div>
    </div>
  </div>

 <h2>if content changes still adopt the height correctly</h2>
 <div style="display: flex">
    <div >
        <div >
            this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra this is a paragraph of parent element with extra
            <div ></div>
      </div>
    </div>
  </div>