'Height of parent and position of grandparent

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 class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child"></div>
    </div>
  </div>

  <h2>Expected output</h2>

  <div class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child expected"></div>
    </div>
  </div>
</div>

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

css


Solution 1:[1]

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 class="grand-parent">
  <div class="parent">
    this is a paragraph of parent element
    <div class="child expected"></div>
  </div>
</div>

Solution 2:[2]

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 class="grand-parent">
    <div class="parent">
      this is a paragraph of parent element
      <div class="child"></div>
    </div>
  </div>
</div>

Solution 3:[3]

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 class="grand-parent">
        <div class="parent">
            this is a paragraph of parent element
            <div class="child"></div>
      </div>
    </div>
  </div>

 <h2>if content changes still adopt the height correctly</h2>
 <div style="display: flex">
    <div class="grand-parent">
        <div class="parent">
            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 class="child"></div>
      </div>
    </div>
  </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif
Solution 2 fnostro
Solution 3 Sarkar

Related Questions