Dynamic list height

Не знаю как сделать, чтобы .wrapper занимал все свободное место.

by Bacher

HTML

<div class="container">
    <div class="header">
        <div>THIS IS DYNAMIC HEADER</div>
        <div>THIS IS DYNAMIC HEADER LINE 2</div>
    </div>
    <div class="wrapper">
        <div class="list">
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
            <div>TEXT</div>
        </div>
    </div>
</div>

CSS

.container {
    position: relative;
    outline: 1px solid black;
    height: 200px;
}

.header {
    outline: 1px solid red;
}

.wrapper {
    position: relative;
    overflow: hidden;
}       
.list {
    height: 100%;
    overflow: scroll;
}