CSS div에 동적 높이

Question

아래와 같이 I는 (A 및 B)를 두 div가있을 y 자동 : 이렇게하면 입력 필드는 특정 높이에 불과합니다.

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

B 섹션의 높이 및 20 픽셀 (예) 100 픽셀 사이의 어딘가에있을 수 있기 때문에이 부분 A의 높이 동적되어야하며 섹션 B 높이에 의존한다.

저는 그 디스플레이를 읽었습니다 : 어떻게 든 플렉스를 사용할 수는 있지만 어떻게해야할지 모르겠습니다.

제안 사항?

감사합니다.

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>