Expanding div which children position is absolute

Question

Is there any option to prevent parent element be overflowed by children element when children element position is absolute and hight of children is higher than parent? I don't want to hide overflowing part by overflow: hidden, I want to force parent div.alert height to be not lower than its children. As you can see I am using position:absolute and transform:tranlateY(-50%) to put the content of div in the middle independently of the content length. Unfortunately when content is higher than minimum height of parent it goes outside of 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 for exactly the opposite of what you're trying to achieve. You never clarified whether it has to be and why does it need to be absolute.

You can easily achieve the same effect using padding on the inside 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 the flex 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 deal with this because position: absolute; is intended to "go out" from the parent's model.

What you can do to solve your problem is using another approach to vertically 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