表格td的min-width特性在flex布局div中失效的适配问题求助

嗨，我懂你现在的困扰！之前用表格做的标签栏，那些左右的占位单元格会在页面变窄时自动从32px收缩到8px，但换成flex布局后这个收缩逻辑就失效了对吧？我帮你调整下CSS，让flex也能完美复刻表格的这个行为：

div.table-container, div.flex-container {
  min-width: 100%;
  padding-bottom: 32px;
}

table {
  border-collapse: collapse;
}

td.left, td.right {
  min-width: 8px;
  width: 32px;
}

td {
  border-top: 1px solid black;
}

td.left {
  border-left: 1px solid black;
}

td.content {
  white-space: nowrap;
}

td.right {
  border-right: 1px solid black;
}

td.space {
  border-top: none;
  width: 4px;
}

div.flex {
  display: flex;
  gap: 4px; /* 对应表格里td.space的4px间距 */
  flex-wrap: nowrap; /* 保持所有标签在一行，和表格行为一致 */
}

div.tab {
  border: 1px solid black;
  border-bottom: none;
  display: flex;
  align-items: center; /* 让内容垂直居中，匹配表格单元格的对齐效果 */
}

div.left, div.right {
  /* 核心修改：用flex属性实现可收缩的宽度逻辑 */
  flex: 1 1 32px; /* 初始宽度32px，空间足够时可扩展，不足时可收缩 */
  min-width: 8px; /* 限制最小宽度，和表格的min-width对应 */
}

div.content {
  white-space: nowrap;
  flex: 0 0 auto; /* 标签文本部分不收缩，保持原有宽度 */
}

关键调整说明： #

• .left和.right的flex属性：通过flex: 1 1 32px让这两个占位块拥有和表格td一样的收缩/扩展能力，配合min-width:8px，就能在页面变窄时自动从32px收缩到最小8px。
• .content的flex设置：flex: 0 0 auto确保标签文本不会被压缩，完全保留white-space:nowrap的效果，和表格里的文本行为一致。
• .flex容器的flex-wrap:nowrap：让所有标签保持在同一行，和原来的表格布局逻辑对齐。

替换你的flex部分CSS后，就能看到和表格布局完全一致的自适应收缩效果啦~

备注：内容来源于stack exchange，提问作者Zergatul