CSS 弹性盒高度

Question

我正在尝试制作聊天布局。所以我有 3 个 div，activeUSer - 顶部，消息中间（必须填充 1 和 3 之间的空间），动作 - 底部

现在，我已经放置了 flex-direction 行。它工作正常。如果输入增长（如果你有 2 行或更多行文字），我需要底部 div 增长

在我将 display:flex 添加到 Actions div（底部）之前，它工作正常。我需要另一个用于输入和按钮的 flex 布局。现在它不关心我在最后一个 div 上设置的填充

这是我的密码笔https://codepen.io/capraruioan/pen/XKWxrV

#content {
  height: 300px;
  display: flex;
  flex-direction: column;
}

.activeUser { 
height: 66px;
  background-color: yellow;
}

.Messages { 
    flex: 1 1 100%;
}
.Actions {
  flex-grow: 1;
  display: flex;
    padding-top: 2px;
  padding-bottom: 20px;
}
.aa { //the inputbox
  border: 1px solid black;
  min-height: 10px
}

Answer 1

通过在第三个 div 上设置默认显示并在其中放置一个带有 display flex 的 div 来修复它