父级的 CSS 最大高度，子级溢出

Question

如何使

.col

元素成为

.container

的100%？

.wrapper {
  max-height: 300px;
  display: flex;
}

.container {
  flex-grow: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}

<div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

Answer 1

如果您希望它成为全宽并将元素放在每个用户下，只需给容器“flex-direction：column;”

.wrapper {
  max-height: 300px;
  display: flex;
}

.container {
  flex-grow: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
  flex-direction: column;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}

<div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

Answer 2

你的包装纸必须是柔性的吗？如果没有，我会删除它，然后将溢出移到该 div 上。

.wrapper {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.container {
  display: flex;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}

<div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

如果确实需要弯曲，我会在容器周围添加一个额外的 div，该容器不是弯曲的，上面有溢出。