An extension of a div whose children position is absolute

Question

Is there a way to prevent the parent from overflowing with the child when the position of the children element is absolute and the children’s height is higher than the parent? I do not want to hide the overflow: hidden overflow part; I want the height of the div.alert parent div.alert be no lower than its children. As you can see, I use position:absolute and transform:tranlateY(-50%) to place the contents of the div in the middle regardless of the length of the content. Unfortunately, when content is above the minimum height of the parent, it goes beyond the parent.

 <div class="alert"> <span> text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> 

CSS

 body{ background: #000; } .alert{ position: relative; margin: 35px 5px; background: #4679BD; color: #fff; padding: 10px 15px; min-height: 40px; } span{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 

JS FIDDLE

Thanks in advance.

Answer 1

Absolute positioning is used to exactly the opposite of what you are trying to achieve. You never figured out if it should be and why it should be absolute.

You can easily achieve the same effect using the registration on the inner element:

 body{ background: #000; } .alert{ position: relative; margin: 35px 5px; background: #4679BD; color: #fff; padding: 10px 15px; min-height: 40px; } span{ padding: 12px 0; display: inline-block; } 

 <div class="alert"> <span> text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> 

http://jsfiddle.net/rnq046wg/4/

---

Using a flexible approach (be careful with older browsers):

 body{ background: #000; } .alert{ position: relative; margin: 35px 5px; background: #4679BD; color: #fff; padding: 10px 15px; min-height: 40px; display: flex; align-items: center; } span{ display: inline-block; } 

 <div class="alert"> <span> text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> <div class="alert"> <span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> 

Answer 2

There is no easy way to handle this, because position: absolute; designed to "exit" from the parent model.

What you can do to solve your problem is to use a different approach to the vertical center:

 .alert{ margin: 35px 5px; background: #4679BD; color: #fff; padding: 10px 15px; min-height: 40px; display: table; table-layout: fixed; width: 100%; box-sizing: border-box; } span{ display: table-cell; vertical-align: middle; } 

Fiddle

Answer 3

If this is static text that has not changed from time to time, give min-height more space to place the text.

Answer 4

Assign fix padding: 20px 0; , it will always fill the content in the middle, instead of using an absolute position and everything else.