CODEWITHSUNDEEP
csscss-position
Benny
Benny

Reputation: 33

Position relative parent with absolute child

How would I go about absolutely positioning the child to the right side of the parent (with margin on all sides of the child element)? Why does the child cause the parent (with a min-height) to generate a scrollbar when the child falls outside of the normal flow of the document? What must I do to get rid of that scrollbar?

Alternatively, how could I use the calc() function in the context of a relative position of the child so I get the same outcome?

* {
  box-sizing: border-box;
}
.box {
  width: 50%;
  min-height: 400px;
  margin: 50px auto;
  background: hsl(220, 80%, 50%);
  overflow: auto;
  position: relative;
}
.child {
  width: 200px;
  margin: 20px;
  min-height: inherit;
  background: firebrick;
  position: absolute;
  right: 0;
}
<div class="box">
  <div class="child"></div>
</div>

Upvotes: 1

Views: 1854

Answers (1)

Stickers
Stickers

Reputation: 78786

The min-height: inherit; on the child inherits the value from the parent which is 400px, and the margin: 20px; makes the total height over 100%, and you have overflow: auto; sets there, it means the scrollbar will appear if the container couldn't hold the content inside.

If they are in the normal content flow, the scrollbar won't appear, since it is min-height, the container will adjust the height to fit the content. However, in the relative and absolute positions, the absolute box is taken out the normal flow, the container won't able to adjust the height to fit automatically, and that will cause the overflow when the child's height exceeds.

To get rid of the scrollbar, you can use calc() function like you mentioned. You just need to set min-height: calc(100% - 40px); on the child. Or, change overflow value to hidden on the parent, the output will be different though.

By the way, since you have box-sizing: border-box; declared, but it does not do anything for margin.

Upvotes: 3

Related Questions