Wenn ein untergeordnetes element überläufe horizontal, warum ist die richtige Polsterung von den Eltern ignoriert?

Gegeben, diese einfache Struktur:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

mit diesem CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Live-demo: http://jsfiddle.net/523me/5/

Beachten Sie, dass die Eltern eine 20px Polsterung und, dass das Kind überläufe horizontal (weil es breiter ist). Wenn Sie Bildlauf im übergeordneten ganzen Weg auf der rechten Seite, werden Sie sehen, dass das Kind berührt den rechten Rand des übergeordneten Elements.

So, die Eltern sollten das Recht haben, die Polsterung, aber es wird ignoriert. Es scheint, dass, wenn das Kind hat eine Feste Breite, die richtige Polsterung der Eltern nicht gelten. (Ist dies angegeben durch eine Norm? Ich würde es gerne wissen. Bitte lassen Sie mich wissen, wenn Sie nichts finden!)

Gibt es eine Möglichkeit zu zwingen, die richtige Polsterung ist in diesem Szenario angewendet ohne mit zu entfernen, die Elemente aus dem Fluss (durch floating oder positioning)?

Wenn ein untergeordnetes element überläufe horizontal, warum ist die richtige Polsterung von den Eltern ignoriert?

Abbildung 1 - Die richtige Polsterung wird ignoriert. Dies ist, wie alle aktuelle Browser Verhalten.

Abbildung 2 - rechts Polsterung gilt. Dies ist, was ich versuche zu erreichen. (Btw, der screenshot ist von IE7, das ist der einzige browser, der nicht zu ignorieren, die rechts-Polsterung.)

InformationsquelleAutor | 2012-04-07
  1. 25

    Du leidest unter diese problem.

    Ich würde es lösen, indem Sie eine Marge, um das Kind (und nicht eine Polsterung der Eltern):

    CSS:

    body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}

    HTML:

    <div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

    • Es ist interessant, dass es die Bedürfnisse der inline-block zu arbeiten, als block tut es nicht, aber man würde denken, es würde. +1 für den link, zeigt die Forschung.
    • Ja, es ist die verdammte Browser, Sie alle haben Ihre eigenen Interpretationen der CSS-Spezifikation, so viel wie Sie versuchen, Sie zu unterstützen es (außer der nicht-standard-Schurken Verwirrung, IE). block und sein Kumpel inline-block teilen sollte alle seine box-Modell-Eigenschaften und unterscheiden sich nur durch inline-block Weg, nicht behindern Seite, die Strömung und die Vermischung mit inline-Zeug. Würde ich sicherlich gerne, um herauszufinden, mehr über dieses bestimmte Verhalten.
    • Risiken, die zwei Kinder mit kleinem Inhalt angezeigt side-by-side: jsfiddle.net/523me/20 +1 von mir auch für den link.
    • auf Ihre Anwendung Absichten, Sie könnten lösen Sie die kleine content-Problem mit einem min-width.
    • Ja, der Fall! Vielleicht ist die Aufrechterhaltung der blockiness des Kindes und geben Sie ihm einen container für Ihre Inhalte: demo
    • Dieses bestimmte Verhalten von display ist eine riesige graue Fläche, von der Spezifikation bis zu Ihrer Umsetzung in Browsern. inline-block Felsen so viel wie es saugt. Wenn Sie spielen, um mit white-space Sie können auch das erwartete Verhalten. Wieder Grau-Bereich!
    • Gute Idee.
    • aber ich habe margin-auto auf Kind :// was soll ich tun?

    InformationsquelleAutor Joao
  2. 5

    Weiß nich aber hinzufügen: 

    #child{
  display: inline-block;
}

    Scheint es fix: http://jsfiddle.net/523me/6/

    Habe ich nur getestet in der neuesten Chrome, kann nicht cross-browser -

    • Das funktioniert in Chrome und IE, aber nicht im Firefox :(
    • Wenn ich mich nicht Irre, inline-block wird verwendet, um block-Elemente direkt/inline mit dem text (inline-Elemente), vermischen es. So dem übergeordneten block könnte es beheben, wie es wäre, normaler text, und relativ zu es, Eltern Polsterung geht das offensichtlich 20px herum. Aber dies ist mehr ein hack, das ist, warum es nicht funktioniert in Firefox. Seine Nutzung ist für bestimmte logische Fällen, in denen eine solche Anordnung ist vorzuziehen.
    InformationsquelleAutor stephenmurdoch
  3. 4

    Nein, die Polsterung ist nicht ignoriert, aber es ist immer noch in der übergeordneten.

    Sehen aktualisiert jsFiddle, wo Sie sehen können, dass die Polsterung hat sich nicht bewegt von seiner ursprünglichen position.

    Edit: Hm, gibt es einige Auffälligkeiten. Wenn Sie geben dem inneren div ein rechten Rand, das wird genauso ignoriert. Hm. Upvoting Ihre Frage stellen.

    • Ich sehe, was du meinst. Gut, es ist was es ist, aber ich mag es nicht. Ich wäre glücklicher, wenn die Polsterung von den Eltern gewickelt wurden, um das größte Kind, anstelle der Anwendung nur für diejenigen Kinder, die nicht über eine Feste Breite.
    InformationsquelleAutor Mr Lister
  4. 1

    Könnten Sie ändern die Polsterung um eine Grenze.

    padding: 20px;

    zu

    border: 20px solid gray;
    • Die Grenze umschließt die scroll-bar, die nicht gut Aussehen: jsfiddle.net/523me/17
    • Ich bin damit einverstanden, ich wollte nicht sehen, screenshots, bis nachdem ich sagte, dass...
    InformationsquelleAutor Circle B
  5. 0

    Gelten padding-right zum überlaufen-element selbst, und bewegen Sie den hintergrund, um seine direkt untergeordneten element.

    <div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

    http://jsfiddle.net/523me/9/

    • Ich möchte vermeiden, wickeln Sie jedes Kind in einem DIV...
    InformationsquelleAutor Marat Tanalin
Schreibe einen Kommentar