Flexbox问题：嵌套Flexbox元素中flex-shrink不生效

需求说明 #

实现左侧溢出元素自动收缩，为右侧元素腾出空间，确保右侧元素在最大宽度范围内显示且不换行。

解决方案 #

通过调整Flex布局的收缩、拉伸及溢出控制属性即可实现，以下是基于Tailwind CSS的修改方案：

修改后的HTML结构 #

<div class="flex container max-w-full">
  <!-- 左侧容器：允许收缩以让出空间 -->
  <div class="flex flex-shrink">
    <div>icon</div>
    <div>logo</div>
    <div class="flex flex-shrink overflow-hidden">
      <div>ToolTip</div>
      <!-- 溢出内容容器：横向滚动，同时允许收缩 -->
      <div class="flex flex-shrink overflow-x-auto overflow-y-hidden">
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
      </div>
    </div>
  </div>
  <!-- 右侧元素：强制不换行，且不额外拉伸 -->
  <div class="flex-grow-0 whitespace-nowrap">
    <p>Right Element to be shown</p>
  </div>
</div>

关键修改点 #

• 右侧元素：添加flex-grow-0（避免过度拉伸）和whitespace-nowrap（强制文本不换行），确保内容在自身宽度内完整显示。
• 左侧容器：保留flex-shrink（默认值1），当容器空间不足时自动收缩，为右侧元素预留足够宽度。
• 溢出内容容器：保留overflow-x-auto让横向溢出内容可滚动，overflow-y-hidden隐藏纵向溢出。

原生CSS等效代码（若不用Tailwind） #

p {
  margin: 0;
}
.container{
  width: 100%;
  max-width: 1280px
}
.flex{
  display: flex
}
.max-w-full{
  max-width: 100%
}
.flex-shrink{
  flex-shrink: 1
}
.flex-grow-0{
  flex-grow: 0
}
.overflow-hidden{
  overflow: hidden
}
.overflow-x-auto{
  overflow-x: auto
}
.overflow-y-hidden{
  overflow-y: hidden
}
.whitespace-nowrap{
  white-space: nowrap
}

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