У меня есть элемент контейнера определенной ширины, сoverflow-x: auto, В нем есть элемент заголовка уровня блока (h1), который, будучи элементом блока, заполняет контейнер горизонтально. И это так, если в контейнере нет других элементов, которые переполняются, создавая горизонтальную полосу прокрутки. Если имеются переполненные элементы, то элемент заголовка заполняет только непересекающееся горизонтальное пространство контейнера, но не появляется в переполненном пространстве.

Скрипка, демонстрирующая проблему:http://jsfiddle.net/rand0mbits/qUh3s/

HTML:

<div id="one">
    <h1>header</h1>
    <table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
    <td>text</td></tr></table>
</div>

CSS:

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
}

table td {
    border: solid 1px;
    padding: 20px;
}

Как мне сделать<h1> заполнить всю ширину контейнера?