CSS div動態高度

Question

我有兩個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可以以某種方式使用，但是我不確定該如何使用。

有什么建議么？

謝謝！

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>