Flex布局如何设置子项最大占容器1/3宽度，内容溢出时可自适应扩张

算力阿峰

2026-10-2

问题解决方案

该需求可以实现，你当前代码的问题出在flex属性配置和几处语法错误上：
你用到的flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，flex-grow为1意味着子项会默认平分容器的剩余空间，所以单个子项时会直接占满整个容器宽度。另外现有代码还有两处语法问题：CSS属性值不需要加引号，flex-wrap是容器属性，不能写在子项样式里。

修正后代码

.container {
  display: flex;
  flex-direction: row;
  background-color: red;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.item {
  /* 三个值分别对应flex-grow:0 / flex-shrink:1 / flex-basis:33.333% */
  /* flex-grow为0：默认不抢占剩余空间，保证单个子项时最多占1/3宽度 */
  /* flex-basis设为33.333%：子项默认基准宽度为容器的1/3 */
  /* flex-shrink为1：空间不足时允许子项收缩 */
  flex: 0 1 33.333%;
  border: 1px solid red;
  /* 内容超出基准宽度时，允许子项宽度自适应内容，实现溢出扩张需求 */
  min-width: fit-content;
  /* 可选配置：内容过长时显示省略号，不需要可以删除
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  */
}

<div class="container">
    <div class="item">blahhhhhhhhhhhhhhhhhhhhhhhhhh</div>
    <div class="item">blahhh</div>
    <div class="item">blahhh</div>
</div>

<div class="container">
    <div class="item">I should take up 1/3</div>
</div>