JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="box-t"></div>
    <div class="box-m clear-fix">
        <div class="box-frame">
            <h2>Классическое оформление пнг блока тянущегося по высоте, с поддержкой ие6</h2>
        </div>
    </div>
    <div class="box-b"></div>
</div>

CSS

.box {
    width: 250px;
}
.box-t,
.box-b {
    height: 30px;
    overflow: hidden;
    background: #00f;
}
.box-b {
    background: #0ff;
}
.box-m {
    background: #f0f;
    padding: 0 30px;
}
.box-frame {
    width: 100%;
    float: left;
    margin: -15px 0;
    position: relative;
    background: #fff;
}

/* clearing */
.clear-fix:after {
    content: "";
    display: block;
    clear: both;
}
.clear-fix {
    zoom: 1;
}