CODEWITHSUNDEEP
css
nadhem
nadhem

Reputation: 188

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

Upvotes: 0

Views: 611

Answers (3)

Temani Afif
Temani Afif

Reputation: 272608

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>

Upvotes: 1

Sarkar
Sarkar

Reputation: 1879

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>

Upvotes: 0

fnostro
fnostro

Reputation: 4591

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>

Upvotes: 0

Related Questions