寻求无固定宽度外列的CSS三联画式（Triptichon）布局方案

我们希望构建一种名为“Triptichon”的CSS单排三元素布局，需满足以下特性：

• 由三个元素组成
• 两侧元素宽度始终保持一致
• 中间元素占据剩余空间
• 可沿块轴（block-axis）方向扩展

我们尝试了float、flexbox、grid等多种实现方式，但均未达到预期效果：当中间元素内容超出可用空间时，会先挤压两侧元素，随后出现溢出或沿块轴方向扩展的情况。以下是使用grid布局和自动列的示例代码：

原Grid布局代码 #

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-bottom: 1em;
}

HTML

<div class="grid">
  <div class="item-1" style="background: #555; color: #FFF;">
    L
  </div>
  <div class="item-2" style="background: #CCC;">
    This is okay (item 1 and 2 both are same size, if your screen is big enough)
  </div>
  <div class="item-3" style="background: #555; color: #FFF;">
  RRR
  </div>
</div>

<div class="grid">
  <div class="item-1" style="background: #555; color: #FFF;">
    L
  </div>
  <div class="item-2" style="background: #CCC;">
    This wont<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="item-3" style="background: #555; color: #FFF;">
  RRR
  </div>
</div>

请问是否存在无需为两侧元素设置固定宽度的解决方案？

可行解决方案 #

方案1：优化Grid布局

问题根源在于原布局中auto类型的中间列会优先占用可用空间，导致两侧的1fr列被挤压。只需修改列模板定义，限制中间列的最小宽度为0，即可避免这种情况：

.grid {
  display: grid;
  /* 中间列使用minmax(0, auto)，确保内容超出时自动换行，不挤压两侧 */
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  margin-bottom: 1em;
}

或者不修改列模板，直接给中间元素添加min-width: 0，也能达到相同效果：

.item-2 {
  min-width: 0;
}

方案2：Flexbox实现

使用Flexbox也能满足需求，通过配置弹性属性确保两侧元素等宽且不被压缩，中间元素自动占剩余空间并换行：

.flex-triptichon {
  display: flex;
  margin-bottom: 1em;
}

/* 两侧元素设置flex:1，确保等宽且不被压缩 */
.flex-triptichon > :first-child,
.flex-triptichon > :last-child {
  flex: 1;
  flex-shrink: 0;
}

/* 中间元素允许收缩，最小宽度设为0以支持换行 */
.flex-triptichon > :nth-child(2) {
  flex: 0 1 auto;
  min-width: 0;
}

HTML结构只需将容器类替换为flex-triptichon即可。

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