如何让Flex容器随子元素收缩适配

问题根源：
子元素设置flex: 0折叠时，其默认的min-width: auto会保留内容的最小宽度，导致Flex容器无法完全收缩到剩余子元素的尺寸，红色背景因此残留。

修改方案：
给.collapsed类添加width: 0和min-width: 0，强制折叠元素完全收缩，让容器能自适应剩余子元素的宽度。

修改后的CSS代码 #

body {
  font-size: 25px;
}

.flex-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.flex-collapsible {
  overflow: hidden;
  flex: 1;
  transition: flex 0.5s cubic-bezier(0.2, 0.4, 0.4, 1.0);

  &.collapsed {
    flex: 0;
    width: 0;
    min-width: 0;
  }
}

#item1 {
  background-color: yellow;
}

#item2 {
  background-color: orange;
}

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="flex-container">
  <div id="item1">fixed</div>
  <div class="flex-collapsible" id="item2">collapsible</div>
</div>

<style>
body {
  font-size: 25px;
}

.flex-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.flex-collapsible {
  overflow: hidden;
  flex: 1;
  transition: flex 0.5s cubic-bezier(0.2, 0.4, 0.4, 1.0);
}

.flex-collapsible.collapsed {
  flex: 0;
  width: 0;
  min-width: 0;
}

#item1 {
  background-color: yellow;
}

#item2 {
  background-color: orange;
}
</style>

<script>
let isExpanded = false
$(".flex-container").on("click", function () {
  if (isExpanded === false) {
    isExpanded = true
    $("#item2").addClass("collapsed")
  } else {
    isExpanded = false
    $("#item2").removeClass("collapsed")
  }
})
</script>

内容的提问来源于stack exchange，提问作者Codey