如何让特定Flexbox子元素单独滚动，其余子元素始终可见？

原布局代码 #

CSS #

.wrapper {
  width: 250px;
  border: 1px solid #000000;
}
.container {
  display: inline-flex;
  flex-direction: row;
  min-width: 100%;
}
.child {
  min-width: fit-content;
  flex-basis: 0px;
  flex-shrink: 1;
  margin: 5px;
}
.first {
  background: yellow;
  flex: 0 1 auto;
}
.second {
  background: red;
  flex: 0 1 1;
}
.third {
   background: blue;
   flex: 0 1 1;
}

HTML #

<div class="wrapper">  
  <div class="container">
    <div class="first child">first</div>
    <div class="container child second">
      <div class="child">
        child
      </div>
      <div class="child">
        child
      </div>
      <div class="child">
        child
      </div>
      <div class="child">
        child
      </div>
      <div class="child">
        child
      </div>
    </div>
    <div class="third child">third</div>
  </div>
</div>

修改方案 #

要达成需求，核心是控制元素的收缩规则和溢出行为，调整后的代码如下：

修改后的CSS #

.wrapper {
  width: 250px;
  border: 1px solid #000000;
  overflow: hidden; /* 避免外层整体溢出 */
}
/* 外层容器改为标准flex布局，占满父容器宽度 */
.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.child {
  margin: 5px;
}
/* 首尾元素禁止收缩，保持自身内容宽度 */
.first {
  background: yellow;
  flex-shrink: 0;
}
.third {
  background: blue;
  flex-shrink: 0;
}
/* 第二个元素占据剩余空间，开启横向滚动 */
.second {
  background: red;
  flex: 1;
  overflow-x: auto;
}
/* 第二个元素内部容器：保持横向排列，宽度由内容决定 */
.second .container {
  display: inline-flex;
  width: auto;
}

修改后的HTML（仅调整类嵌套逻辑，结构更清晰） #

<div class="wrapper">  
  <div class="container">
    <div class="first child">first</div>
    <div class="second child">
      <div class="container">
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
      </div>
    </div>
    <div class="third child">third</div>
  </div>
</div>

关键逻辑说明 #

• flex-shrink: 0：给首尾元素设置该属性，确保它们不会因容器空间不足被压缩，始终完整显示自身内容
• flex: 1：让第二个元素自动占据外层容器中除首尾元素外的所有剩余空间
• overflow-x: auto：当第二个元素内部内容宽度超过自身可用宽度时，自动触发横向滚动条
• 内层container设为inline-flex+width: auto：保证内部子元素横向排列，且容器宽度由内容决定，触发父元素的滚动行为

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