Parent Flexbox Container Ignores Child's Flexbox Min-width

A very short prehistory My story begins with struggling to make overflow-wrap: break-word; working inside a flexbox. Flexbox container didn't want to understand that its item can b

Solution 1:

To understand this, simply add border with different colors to your items and you will see that you have overflow at different levels. More precesily, we have only one overflow that is moving to a lower lever after adding each min-width.

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}

<divclass="body"><divclass="flex"style="border:5px solid red;"><divclass="flex"style="border:5px solid green;"><divclass="flex"style="border:5px solid blue;"><divclass="flex-column"style="border:5px solid yellow;"><divclass="item"style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div></div></div></div></div></div>

Every min-width will fix one overflow, allow the element to shrink and move the overflow to next level. That's why you need a cascading min-width.

Adding one:

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}

<divclass="body"><divclass="flex"style="border:5px solid red;"><!-- adding min-width at this level --><divclass="flex"style="border:5px solid green;min-width:0;"><divclass="flex"style="border:5px solid blue;"><divclass="flex-column"style="border:5px solid yellow;"><divclass="item"style="border:5px solid pink;">
              This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
            </div></div></div></div></div></div></div>

Adding another:

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}

<divclass="body"><divclass="flex"style="border:5px solid red;"><divclass="flex"style="border:5px solid green;min-width:0;"><!-- adding min-width at this level --><divclass="flex"style="border:5px solid blue;min-width:0"><divclass="flex-column"style="border:5px solid yellow;"><divclass="item"style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div></div></div></div></div></div>

Again:

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}

<divclass="body"><divclass="flex"style="border:5px solid red;"><divclass="flex"style="border:5px solid green;min-width:0;"><divclass="flex"style="border:5px solid blue;min-width:0"><!-- adding min-width at this level --><divclass="flex-column"style="border:5px solid yellow;min-width:0;"><divclass="item"style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div></div></div></div></div></div>

The last one:

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}

<divclass="body"><divclass="flex"style="border:5px solid red;"><divclass="flex"style="border:5px solid green;min-width:0;"><divclass="flex"style="border:5px solid blue;min-width:0"><divclass="flex-column"style="border:5px solid yellow;min-width:0;"><!-- adding min-width at this level --><divclass="item"style="border:5px solid pink;min-width:0">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div></div></div></div></div></div>