html - Why does the outer <div> here not completely surround the inner <div>?

Question

I've got a jsfiddle here: https://jsfiddle.net/Lh7qbye2/7/

And a test web page here: https://shetline.com/test/test01.html

The question is this: Why doesn't the content of the inner <div> prevent the outer <div> from shrinking to less than the width of the inner <div> when you resize the containing window to a narrow size?

Updates based on the answer I got for the problem:

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

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

 

I can solve the problem for Chrome or Safari by using:

width: fit-content;

...on the outer <div>, but this doesn't solve the problem for Firefox or Edge. Further, MDN marks fit-content as an experimental API:

This is an experimental API that should not be used in production code.

word-break: break-all on the outer <div> kinda, sorta, helps, but messes up all word wrap. If I try to compensate by setting normal breaking on the <p> and <button> tags, the help provided by the outer break-all disappears.

One thing that really confuses me is that I know I've seen situations like this with no spill-over problem at all, and I didn't have to go out of my way to get the behavior I'd expect. What am I missing that's wrong in this simplified example?

 

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>

Answer 1

What you want can be done using a combination of inline-block and min-width:100%. A block element has its width defined based on its parent element (containing block) while inline-block will have its width defined by its content.

Adding the min-width:100% will make it behave as block element. it's not mandatory in this case since you already have a lot of content so you are sure to cover all the width:

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>