防止特定的弹性盒子项溢出其容器

Question

我有以下布局：

.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;
}

<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>

我的问题是，在溢出的情况下，我需要单独在第二个孩子上显示滚动条，这意味着第一个和第三个孩子应该始终可见，我该怎么做？

Answer 1

您不需要编写的大部分代码。保持简单

.wrapper {
  width: 250px;
  border: 1px solid #000;
}
.container {
  display: flex; /* flexbox container */
}
.child {
  margin: 5px;
}
.first {
  background: yellow;
}
.second {
  background: red;
  flex: 1; /* fill remaining space */
  overflow: auto; /* add scrollbar if needed */
}
.third {
   background: blue;
}

<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>