Ich habe ein Containerelement mit einer bestimmten Breiteoverflow-x: auto. Darin habe ich ein Block-Level-Header-Element (h1), das als Block-Element den Container horizontal füllen soll. Solange sich keine anderen Elemente im Container befinden, die überlaufen, wird eine horizontale Bildlaufleiste erstellt. Wenn überlaufende Elemente vorhanden sind, füllt das Headerelement nur den nicht überlaufenden horizontalen Bereich des Containers, wird jedoch nicht im überlaufenden Bereich angezeigt.

Geige, die das Problem demonstriert: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;
}

Wie mache ich das?<h1> die ganze Breite des Behälters füllen?