Высота контейнера с детьми

Мы используем CSS3 и HTML5. Я пытаюсь написать страницу, где будет div, чтобы показать некоторый градиент, затем появляется заголовок, а заголовок сопровождается контейнером.

Это то, что я написал и прекрасно работает, пока не представит некоторые фиктивные строки. Нажмите здесь, чтобы увидеть образец, и это фрагмент кода

CSS,

html {
    height: 100%;
}
body {
    margin: 0px;
    height: 100%;
}
.container {
    height: 100%;
}
.oss-gradient {
    height: 5px;
    min-width: 1024px;
    background: yellow;
}
.header {
    height: 40px;
    min-width: 1024px;
    background: #def;
}
.content-wrapper {
    width: 1024px;
    height: calc(100% - 45px);
    background: #defabc;
    margin: 0px auto;
}

Мой html,

<div class="container">
    <div class="oss-gradient">
    </div>
    <div class="header">
    </div>
    <div class="content-wrapper">
        <!-- some dummy lines here //-->
    </div>
</div>

Затем я изменил свойство height-content-wrapper на min-height. И тогда это сработало хорошо. Он отлично работал, когда я пытаюсь изменить уровни масштабирования и размер окна браузера. Затем я открыл firebug и зависал на элементах div, body и html contianer. Я заметил, что элемент content-wrapper вышел из контейнера div. Другими словами, контейнер, тело и html не расширялись с помощью элемента content-wrapper.

Затем я добавил свойство min-height для контейнера div, думая, что он будет расшифровываться поверх контент-обертки. Затем я увеличил масштаб страницы и обнаружил, что оболочка содержимого не расширяет доступную высоту.

Затем я удалил свойство height на свойства html, body и min-height на контейнере. Теперь все три элемента расширяются по отношению к ребенку. Но когда я удаляю все фиктивные строки, я не могу видеть div-оболочку content-wrapper.

Как я могу это исправить?