Warum funktioniert die äußere hier nicht vollständig das Innere umgeben ?

Lesezeit: 10 Minuten

Warum funktioniert die ausere hier nicht vollstandig das Innere umgeben
kschetline

Ich habe hier eine jsfiddle: https://jsfiddle.net/Lh7qbye2/7/

Und eine Testseite hier: https://shetline.com/test/test01.html

Die Frage ist: Warum nicht der Inhalt des Inneren <div> das Äußere verhindern <div> vom Schrumpfen auf weniger als die Breite des Inneren <div> wenn Sie die Größe des enthaltenden Fensters auf eine schmale Größe ändern?

Beispielbild eines inneren div, das einem äußeren div entkommt

Updates basierend auf der Antwort, die ich für das Problem erhalten habe:

https://jsfiddle.net/Lh7qbye2/8/

https://shetline.com/test/test02.html

Ich kann das Problem für Chrome oder Safari lösen, indem ich Folgendes verwende:

width: fit-content;

…an der Außenseite <div>, aber das löst das Problem für Firefox oder Edge nicht. Ferner MDN-Marken fit-content als ein experimentelle API:

Dies ist eine experimentelle API, die nicht im Produktionscode verwendet werden sollte.

word-break: break-all auf der Außenseite <div> irgendwie, irgendwie, hilft, bringt aber den ganzen Zeilenumbruch durcheinander. Wenn ich versuche, durch Einstellung zu kompensieren normal brechen auf die <p> und <button> Tags, die Hilfe, die von außen bereitgestellt wird break-all verschwindet.

Eine Sache, die mich wirklich verwirrt, ist, dass ich weiß, dass ich Situationen wie diese ohne jegliches Spillover-Problem gesehen habe, und ich musste mir keine Mühe geben, um das erwartete Verhalten zu erzielen. Was übersehe ich an diesem vereinfachten Beispiel?

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  /* width: fit-content; // With this it works for Chrome or Safari, but not for Firefox or Edge. */
  /* word-break: break-all; // For some reason this sort of helps too, but of course messes up all word wrapping. */
  /* If I try to apply "word-break: normal" to <p> and <button> tags to compensate, the inner <div> leaks out again. */
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  background-color: #AEB;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

  • Sie könnten hinzufügen flex-wrap: wrap damit sich die Biegeelemente wickeln, oder Sie könnten hinzufügen overlfow: scroll damit sie horizontal gescrollt werden können. Andernfalls ist dies das erwartete Verhalten – es gibt keinen Platz mehr für die Elemente, die passen müssen, sodass sie aus ihrem übergeordneten Container herausfließen.

    – skyline3000

    22. August 2019 um 0:30 Uhr


  • Sollte das äußere div nicht einfach aufhören zu schrumpfen, wenn sein innerer Inhalt mehr Platz benötigt? (Ich habe unten erklärt, warum Flex-Wrap nicht die Antwort ist, nach der ich suche.) Ich bin mir ziemlich sicher, dass ich schon einmal gesehen habe, dass sich

    s so verhalten, ich weiß nur nicht, warum es hier nicht passiert.

    – kschetline

    22. August 2019 um 0:34 Uhr

  • da das Blockelement standardmäßig eine Breite von 100 % des übergeordneten Elements hat, sodass seine Breite nicht durch seinen Inhalt definiert wird. Verwenden Sie Inline-Block und Sie werden haben, was Sie wollen

    – Temani Afif

    22. August 2019 um 0:34 Uhr

  • Danke Temani! Posten Sie das als offizielle Antwort, und ich werde es definitiv als Lösung markieren! 🙂

    – kschetline

    22. August 2019 um 0:39 Uhr

  • als Randnotiz, das Problem beginnt mit other-stuff .. Fügen Sie einen Hintergrund hinzu und Sie werden dort den Überlauf sehen

    – Temani Afif

    22. August 2019 um 0:39 Uhr


1647263528 662 Warum funktioniert die ausere hier nicht vollstandig das Innere umgeben
Temani Afif

Was Sie wollen, kann mit einer Kombination von erreicht werden inline-block und min-width:100%. Die Breite eines Blockelements wird basierend auf seinem übergeordneten Element (das den Block enthält) während definiert inline-block wird seine Breite durch seinen Inhalt definiert haben.

Hinzufügen der min-width:100% wird es sich wie ein Blockelement verhalten. Dies ist in diesem Fall nicht zwingend erforderlich, da Sie bereits viele Inhalte haben, sodass Sie sicher sind, die gesamte Breite abzudecken:

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
  min-width:100%;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

Reduzieren Sie den Text oben und min-width:100% wird obligatorisch, um das Verhalten in voller Breite zu haben.

Führen Sie das Snippet auf der ganzen Seite aus

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

<div class="demo" style="min-width:100%;">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

Von die Spezifikation:

Nicht ersetzte Elemente auf Blockebene im normalen Fluss

Die folgenden Einschränkungen müssen für die verwendeten Werte der anderen Eigenschaften gelten:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Beachten Sie, dass der Inhalt bei der Definition der Breite keine Rolle spielt.

‘Inline-Block’, nicht ersetzte Elemente im normalen Fluss

Wenn ‘Breite’ ‘Auto’ ist, ist der verwendete Wert die Schrumpfbreite

Die Berechnung der Breite zum Anpassen verkleinern ähnelt der Berechnung der Breite einer Tabellenzelle mit dem automatischen Tabellenlayoutalgorithmus. Grob: Berechnen Sie die bevorzugte Breite durch Formatierung der Inhalt ohne Zeilenumbrüche außer dort, wo explizite Zeilenumbrüche auftreten, und berechnen Sie auch die bevorzugte Mindestbreite, indem Sie zB alle möglichen Zeilenumbrüche ausprobieren. Drittens finden Sie die verfügbare Breite: In diesem Fall ist dies die Breite des umgebenden Blocks abzüglich der verwendeten Werte von ‘margin-left’, ‘border-left-width’, ‘padding-left’, ‘padding-right’, ‘border-right-width’, ‘margin-right’ und die Breite aller relevanten Bildlaufleisten

Die Schrumpfbreite beträgt: min(max(preferred minimum width, available width), preferred width)

Beachten Sie, wie der Inhalt verwendet wird, um die Breite zu definieren.


Gleiches gilt für jede Art von Anzeigewert (grid, flex, tableetc) und der Trick besteht darin, es durch die zu ersetzen inline-* Äquivalent (inline-grid, inline-flex, inline-tableetc)

  • Ich hatte bis heute keine Gelegenheit, dies mit Edge zu versuchen. Leider mit Edge, mit inline-block hilft nicht, auch wenn man es hinzufügt width: 100%. Woher inline-block arbeitet für mich, width: 100% scheint nicht nötig zu sein.

    – kschetline

    22. August 2019 um 13:32 Uhr

  • @kshetline Ich bin mir ziemlich sicher, dass Sie ein Problem mit der Flexbox haben. Ich glaube nicht, dass Inline-Block einen Fehler in Edge verursachen kann, aber Flexbox kann es

    – Temani Afif

    22. August 2019 um 13:37 Uhr

  • Flex-Box könnte Teil des Problems sein, aber ich habe versucht, diese “andere Sachen”-Klasse zu ändern, um Inline-Flex, Block, Inline-Block zu verwenden, und ich habe versucht, eine explizite Breite und/oder Mindestbreite anzugeben … und das äußere div mit der Klasse “demo” ist egal! Egal, was ich bisher versucht habe, mit Edge kann ich ein div nicht dazu bringen, sich um die Breite seines Inhalts zu kümmern, egal was ich versucht habe.

    – kschetline

    22. August 2019 um 13:52 Uhr

  • @kshetline vielleicht verdient es eine neue Frage. Sie haben wahrscheinlich einen Fehler entdeckt. Ich kann nicht helfen, da ich Edge nicht zum Testen habe

    – Temani Afif

    22. August 2019 um 14:39 Uhr

  • Oder ich kann einfach warten, bis der aktuelle Edge-Browser eines natürlichen Todes stirbt 😁. Ich habe dieses Problem mit dem jetzt Beta-Chromium-basierten Edge ausprobiert, und es funktioniert dort einwandfrei. Das Hauptproblem, an dem ich arbeite, sind responsive Layouts, und wahrscheinlich wird sowieso niemand Edge auf einem winzigen Bildschirm verwenden.

    – kschetline

    22. August 2019 um 16:50 Uhr

Sie müssen verwenden flex-wrap: wrap; um den Inhalt in die nächste Zeile umzubrechen.

Wenn Sie das sagen, da Sie eine feste Breite für verwenden buttonsdies ist die beste Option für kleinere Bildschirme.

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>

  • Du verfehlst den Sinn dessen, was ich vorhabe. Ich möchte nicht, dass das innere

    sich mehr umschließt und schmaler wird. (In vielen Situationen wäre das wünschenswert, ja, aber darum geht es in diesem Beispiel nicht.) Ich möchte, dass das äußere

    dazu dient hör auf zu schrumpfen wenn es die Breite des inneren

    erreicht.

    – kschetline

    22. August 2019 um 0:31 Uhr

1001670cookie-checkWarum funktioniert die äußere hier nicht vollständig das Innere umgeben ?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy