Question

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

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?

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

Answer 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%;
}

尽管溢出：隐藏和最小宽度：0，但弹性盒容器溢出

1 个答案: