Flex box 容器溢出尽管溢出：隐藏和最小宽度：0答案

【问题标题】：Flex box container overflows despite overflow:hidden and min-width: 0Flex box 容器溢出尽管溢出：隐藏和最小宽度：0
【发布时间】：2021-03-09 07:50:15
【问题描述】：

我正在尝试让我的 flex box 容器适合 div
我什至在绝望中设置了min-width: 0 和overflow: hidden 但是当宽度改变时，弹性盒子仍然没有缩小
这是改变宽度时的样子

https://jsfiddle.net/o5c76hy2/25/

* {
  margin: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

#header {
  width: 100%;
  height: 100px;
  background-color: black;
  color: white;
  position: relative;

}

#mainContainer {
  display: table;
  width: 50%;
  background-color: yellow;
  margin: auto;
  padding-left: 100px;
  padding-right: 100px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  min-width: auto;

}

.subContainer {
  background-color: green;
  color: white;
  padding: 10px;
  margin: 10px;

  align-items: center;
  display: flex;
  min-width: 0;
  overflow: hidden;


}

.item1 {
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  min-width: 0;
}

.item2 {
  background-color: orange;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  margin: 5px;
  min-width: 0;
}

<!DOCTYPE html>
<html>

  <head></head>

  <body>
    <div id="header"></div>
    <div id="mainContainer">
      <div class="subContainer">
        <span class="item1">aaaaaaaaaaaaaaaaaaaaaaaaa</span>
        <span class="item2" style="background-color: red;">bbb</span>
        <span class="item2" >c</span>
      </div>



    </div>
  </body>

</html>

我参考了其他链接，例如：
Flex child is overflowing the parent container even after setting min-width:0?
Why don't flex items shrink past content size?

但我似乎仍然无法解决问题，我很确定这很明显，但我似乎无法指出它，任何帮助将严重感激

【问题讨论】：

这里的代码与你的小提琴不匹配，在那里你已经明确地将第一项的宽度指定为 50%（以及不同的类名。）不确定你到底是什么想要现在在这里实现，所以请澄清一下。
display:table 是罪魁祸首，删除它
@Temani Afif 我删除了display:table，但现在它导致了另一个问题，例如溢出和顶部空格jsfiddle.net/0d5q8uma/2

标签： html css

【解决方案1】：

在#maincontainer 中删除display: table;，并将width: 50%; 更改为width: calc(50% - 200px);。最终结果应如下所示：

#mainContainer {
  width: calc(50% - 200px);
  background-color: yellow;
  margin: auto;
  padding-left: 100px;
  padding-right: 100px;
  height: 100%;
}

【讨论】：

您能否添加代码的 sn-p 以便我可以将答案标记为已接受？