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

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?

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>

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)

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>