如何在Flex布局中具有不固定高度的垂直滚动条? [英] How to have a vertical scroll bar in a flex layout without fixed height?

问题描述

那个问题已经由主持人以重复形式关闭，但我倾向于不同意，另一个问题是关于一个要素限制了另一个要素.在这里，除了特定元素之外，其他任何元素都可以是最高的.

代码始终是显示问题的最简单方法:

预期:

 < p>目标是绿色容器的高度不超过其他框的高度，并且其中会出现垂直滚动条.;/p>< div class =容器">< div class =红色">< ul>< li>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li></ul></div>< div class =绿色溢出">< ul>< li>我们的</li>< li&v; Chevreuil</li>< li> Lapin</li>< li> Loutre</li>< li>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li></ul></div>< div class =蓝色">< ul>< li>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li>< li> Loutre</li></ul></div></div> 

  .container {显示:flex;}.container>div {填充:0 1rem;保证金:1雷姆;/*这会使它工作，但是我不希望有固定值但是第二大盒子的高度最大高度:200像素； */}.overflow {溢出:自动；}.红色的 {背景颜色:#fcc;}.绿色 {背景颜色:#cfc;}.蓝色的 {背景颜色:#ccf;}ul {填充:0;列表样式:无；}li {填充:0.5rem;} 

解决方案

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

这里是一个例子:

  .box-container {显示:flex;职位:相对}.盒子 {填充:0 1rem;保证金:1雷姆;}.box.red {背景颜色:#fcc;}.green-box-wrapper {职位:相对/*绿色框的宽度加上边距*/宽度:calc(7.9125rem + 2rem);}.box.green {背景颜色:#cfc;位置:绝对；最高:0;底部:0;溢出-y:自动;溢出-x:隐藏;宽度:5.9125rem;}.box.blue {背景颜色:#ccf;}ul {填充:0;列表样式:无；}li {填充:0.5rem;}  

 < div class ="box-container">< div class ="box red">< ul>< li>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li></ul></div>< div class ="green-box-wrapper">< div class ="box green">< ul>< li>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li>< li>我们的</li>< li&v; 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>我们的</li>< li> Chevreuil</li>< li> Lapin</li>< li> Loutre</li>< li> Loutre</li>< li> Loutre</li></ul></div></div>  

尝试编辑框中的文本.三个框的高度将始终等于最大框的高度(绿色框除外).但是，当文本过多时，绿色框不会改变其宽度.

Edit: That question has been closed by a moderator as a duplicate, but I tend to disagree, the other question is about one element limiting the others. Here any other element than a specific one can be the tallest.

The code is always the easiest way to show a problem: https://codepen.io/Flaburgan/pen/MWbPyjN

I have boxes in a flex layout and they have different height with a dynamic content. All the boxes adapt and have the height of the tallest one, and that is great.

However, I know that one of them can have a lot of content. Thus I would like my boxes to ignore this one, and take the height of the second biggest box. The first one should then see a vertical scroll bar appearing inside it.

How can I achieve this without using fixed height?

Actual:

Expected:

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

解决方案

You can set the height of the green box to the height of the parent container by positioning it absolutely. Then its height would not be fixed. But the width of the green box would have to be fixed, otherwise the boxes after the green box would not be positioned correctly.

Here is an example:

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

Try to edit the text in the boxes. The height of the three boxes will always be equal to the height of the largest one (except the green box). But the green box won't change its width when there's too much text.

这篇关于如何在Flex布局中具有不固定高度的垂直滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！