How can I contain an absolute positioned div in a relative positioned div?

问题

How can I contain an absolute positioned div inside a relative positioned div? For example, a structure like this:

.wrapper {
  position: relative;
}

.contentWrapper {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="wrapper clearfix">
  <div class="contentWrapper">
    <div class="content">Looong text here...</div>
  </div>
</div>

Will result as the height of the contentWrapper to be 0 (when element inspected) and the div with the content class will not show.

Is there a way to apply clearfix method for absolute positioned elements inside relative ones?

What I am trying to do here is to avoid the Looooong text from expanding the wrapper (wrapper has a dynamic width, cannot be fixed). contentWrapper contains the text and wraps it, also it fills the width of the parent wrapper so that it does not get expanded. The only problem is the height of the contentWrapper is 0, and the text is not showing.

Any other way to do this?

回答1:

No, this is not possible, you can only use a clearfix to clear floated elements.

回答2:

If the only element inside your relatively positioned container is positioned absolute, you will have to specify a height on the container. The problem is that position:absolue removes the element from the content flow, so the container doesn't recognize the absolutely positioned element's height.

来源：https://stackoverflow.com/questions/18752479/how-can-i-contain-an-absolute-positioned-div-in-a-relative-positioned-div