代码之家 › 专栏 › 技术社区 › jaudo

柔性箱最大高度未考虑

flexbox css

jaudo · 技术社区 · 6 年前

max-height 属于 400px min-height: 300px .

在下面的代码片段中,我希望子级的高度为400px/3,并显示一个用于溢出的滚动条。

.child {
  min-height: 300px;
  width: 300px;
}

.parent {
  display: flex;
  flex-direction: column;
  max-height: 400px;
}

<div class="parent">
  <div class="child" style="background-color:red"></div>
  <div class="child" style="background-color:blue"></div>
  <div class="child" style="background-color:green"></div>
 </div>

2 回复 | 直到 6 年前

Johannes 6 年前

为此,您需要为flex子级中的实际内容使用另一个层/元素。这些内容元素得到最小高度,flex子元素没有得到高度,但是(默认情况下)允许收缩高度。 overflow: auto;

.parent {
  display: flex;
  flex-direction: column;
  max-height: 400px;
}
.child {
  width: 300px;
  overflow: auto;
}
.child_contents {
  min-height: 300px;
}

<div class="parent">
  <div class="child" style="background-color:red">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
  <div class="child" style="background-color:blue">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
  <div class="child" style="background-color:green">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
</div>

Diego Fortes 6 年前

只需添加 overflow-y: scroll; 到 .parent .

.parent {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: scroll;
}

.child {
  min-height: 300px;
  width: 300px;
}

编辑

overflow-y: scroll 给孩子们 overflow-y: hidden

HTML格式

<div class="parent">
  <div class="child" style="background-color:red">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
  <div class="child" style="background-color:blue">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
  <div class="child" style="background-color:green">
    <div class="child_contents">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </div>
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  max-height: 400px;
    overflow-y: hidden;
}
.child {
  width: 300px;
  overflow-y: scroll;
}
.child_contents {
  min-height: 300px;
}

Click here for codepen.

yochanan sheinberger 6 年前

.parent {
display: flex;
flex-direction: column;
max-height: 400px;
overflow: auto;
}