css - CSS div动态高度

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



B节有一个最大高度为100px的输入字段（例如），并且具有y自动溢出功能：这样，输入字段将只有一定的高度。

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

由于B区的高度可以在20像素到100像素之间（例如），因此A区的高度必须是动态的，并且取决于B区的高度。

我读到display：flex可以以某种方式使用，但是我不确定该如何使用。

有什么建议么？

谢谢！

最佳答案

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>

关于css - CSS div动态高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41751523/