时间戳

首页 > 解决方案 > 如何在没有固定高度的 flex 布局中拥有垂直滚动条？

css - 如何在没有固定高度的 flex 布局中拥有垂直滚动条？

问题描述

编辑：该问题已被主持人关闭为重复，但我倾向于不同意，另一个问题是关于限制其他元素的一个元素。在这里，除特定元素之外的任何其他元素都可以是最高的。

代码始终是显示问题的最简单方法：https ://codepen.io/Flaburgan/pen/MWbPyjN

我在 flex 布局中有盒子，它们具有不同的高度和动态内容。所有的盒子都适应并具有最高的盒子的高度，这很棒。

但是，我知道其中一个可以有很多内容。因此，我希望我的盒子忽略这个，取第二大盒子的高度。然后第一个应该会看到其中出现一个垂直滚动条。

如何在不使用固定高度的情况下实现这一目标？

实际的：
实际的

预期的：
预期的

<p>The goal is that the green container height doesn't exceed the height of the other boxes, and that a vertical scroll bar appear in it.</p>

<div class="container">
  <div class="red">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="green overflow">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="blue">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Loutre</li>
    </ul>
  </div>
</div>

.container {
  display: flex;
}

.container > div {
  padding: 0 1rem;
  margin: 1rem;
  /* This would make it works, but I don't want a fixed value
  but the height of the second biggest box
  max-height: 200px;*/
}

.overflow {
  overflow: auto;
}

.red {
  background-color: #fcc;
}

.green {
  background-color: #cfc;
}

.blue {
  background-color: #ccf;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  padding: 0.5rem;
}

标签： cssflexbox

解决方案

您可以通过绝对定位将绿色框的高度设置为父容器的高度。那么它的高度就不会固定了。但是绿框的宽度必须固定，否则绿框后面的框将无法正确定位。

这是一个例子：

.box-container {
  display: flex;
  position: relative;
}

.box {
  padding: 0 1rem;
  margin: 1rem;
}

.box.red {
  background-color: #fcc;
}

.green-box-wrapper {
  position: relative;
  /* width of the green box plus the margin */
  width: calc(7.9125rem + 2rem);
}

.box.green {
  background-color: #cfc;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 5.9125rem;
}

.box.blue {
  background-color: #ccf;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  padding: 0.5rem;
}
<div class="box-container">
  <div class="box red">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
    </ul>
  </div>
  <div class="green-box-wrapper">
    <div class="box green">
      <ul>
        <li>Ours</li>
        <li>Chevreuil</li>
        <li>Lapin</li>
        <li>Loutre</li>
        <li>Ours</li>
        <li>Chevreuil</li>
        <li>Lapin</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
        <li>Loutre</li>
      </ul>
    </div>
  </div>
  <div class="box blue">
    <ul>
      <li>Ours</li>
      <li>Chevreuil</li>
      <li>Lapin</li>
      <li>Loutre</li>
      <li>Loutre</li>
      <li>Loutre</li>
    </ul>
  </div>
</div>

尝试编辑框中的文本。三个盒子的高度总是等于最大的盒子的高度（除了绿色盒子）。但是当文本太多时，绿色框不会改变它的宽度。

推荐阅读