Eu tenho um elemento container que tem uma certa largura, comoverflow-x: auto. Nele, tenho um elemento de cabeçalho no nível do bloco (h1) que, sendo um elemento do bloco, preenche o contêiner horizontalmente. E faz isso, desde que não haja outros elementos no contêiner que excedam, criando uma barra de rolagem horizontal. Se houver elementos transbordando, o elemento do cabeçalho preenche apenas o espaço horizontal não transbordante do contêiner, mas não aparece no espaço transbordando.

Violino demonstrando o problema: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;
}

Como faço para<h1> preencher toda a largura do recipiente?