相关疑难解决方法(0)

我试图在某些元素的剩余空间中设置一个垂直可滚动的 div。它们都没有固定的高度。

我得到的只是一个可以根据其内容进行调整的 Flexbox 元素，但我真正需要的是该元素填充空白空间，并且其内容只是滚动到那里。

小提琴代码

超文本标记语言

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more …

我正在使用flexbox为一个站点搭建基本UI.与通常的电子邮件布局非常相似.

出于某种原因,第二个孩子(类.main-body,海藻绿柱,layouted Flexbox的容器的颜色)( .content-main,李子色)比其母公司,这一点我一个更大的高度不希望它.

我制作了一个codepen代码段来显示这种行为.

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}
.container {
  height: inherit;
  background: PeachPuff;
  padding: 1em;
  display: flex;
  max-height: 500px;
}
.sidebar {
  flex: 0 1 15%;
  background: khaki;
}
.content {
  flex: 1 1 auto;
  background: plum;
  padding: 0.8em;
  display: flex;
  flex-direction: column;
}
.content-header {
  background: lightgreen;
  padding: 0.3em;
  flex: 0 0 7%; …

当只有一行“弹性项目”时，Chrome和Firefox显示不同的结果。当有多行（换行）时，Chrome和Firefox显示相同的结果！

那么为什么会这样呢？那是一个错误，还是我缺少一些“默认值”或差异？

body{
    background-color: teal;
}

.flexContainer{
    background-color: blue;
    border: 1px solid black;
    height: 300px;
}
.flexItem{
    background-color: red;
    border: 1px solid black;
}

.flexContainer{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

.flexItem{ 
    flex: 0 1 0; 
}

<div class="flexContainer">
    <div class="flexItem">1111111111111111111</div>
    <div class="flexItem">2222<br/>2222</div>
    <div class="flexItem">3333<br/>3333<br/>3333</div>
    <div class="flexItem">4444444444444444444</div>
</div>