CSS div动态高度

Question

我有两个div，如下所示（A和B）：

B部分有一个输入字段，最大高度为100px（作为示例）和overflow-y auto：这样，输入字段只有一定的高度。

.section_B{
   position: absolute;
   bottom: 0;   
   width: 100%;
}
.section_B_input{
   max-height: 100px;
   overflow-y: auto;
}

因为B部分的高度可以在20px到100px之间（例如），所以A部分的高度需要是动态的，并且取决于B部分的高度。

我看了那个显示：flex可以用某种方式，但我不知道怎么做。

有什么建议吗？

谢谢！

Answer 1

使用flexbox的技巧是将flex-grow: 1;添加到您想要具有动态高度的元素。这是一个简单的例子。

* {margin:0;padding:0;box-sizing:border-box;}
html,body,.flex {
  min-height: 100vh;
}
.flex {
  display: flex;
  flex-direction: column;
}
.a {
  flex-grow: 1;
  background: #eee;
}
.b {
  background: #333;
}
section {
  padding: 2em;
}
input {
  transition: padding .5s;
}
input:focus {
  padding: 2em;
}

<div class="flex">
  <section class="a">
  </section>
  <section class="b">
    <input>
  </section>
</div>