如何让flexbox容器边框自适应元素宽度且保留flex-basis属性

你需要的效果可以通过以下方式实现，不用width，完全保留flex-basis属性，同时让容器自适应包裹子元素：

核心修改点 #

• 将容器的display: flex改为display: inline-flex，让容器变为行内块级元素，自动收缩包裹子元素，不再占满页面宽度
• 给子元素添加flex-shrink: 0，阻止子元素因容器宽度限制收缩，确保flex-basis设置的尺寸生效

修改后的完整代码 #

body {
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
}

.table {
  display: inline-flex; /* 改为inline-flex */
  flex-direction: row;
  border: 5px solid rgb(75, 100, 182);
}

.table > * {
  flex-basis: 100px;
  flex-shrink: 0; /* 添加这一行 */
}

.bronze {
  background-color: rgb(116, 97, 44);
}
.silver {
  background-color: silver;
}
.gold {
  background-color: gold;
} 
.platinum {
  background-color: rgb(69, 179, 173);
}
.diamond {
  background-color: rgb(175, 81, 175);
}

<body>
  <div class="table">
    <div class="bronze">Bronze</div>
    <div class="silver">Silver</div>
    <div class="gold">Gold</div>
    <div class="platinum">Platinum</div>
    <div class="diamond">Diamond</div>
  </div>
</body>

原理说明 #

• inline-flex让容器具备flex布局能力的同时，保持行内元素的特性：宽度由子元素总宽度决定，不会撑满父容器
• 默认情况下flex-shrink: 1，当容器宽度不足时子元素会自动收缩，导致flex-basis的设置被覆盖；设置flex-shrink: 0后，子元素会严格按照flex-basis定义的尺寸显示，容器宽度随之自适应调整

现在你修改flex-basis的数值时，容器边框会自动适配子元素的总宽度，完全符合你的需求。

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