css flexbox响应手风琴

我需要使用纯css解决方案构建一个响应性强的手风琴，该场景在图像中进行了说明，这是与默认手风琴唯一不同的地方，它允许用户打开两个选项卡，并将屏幕分成两部分

使用纯flex解决方案是否可以实现这一点，从而在隐藏任何div内容时，div都会自动收缩？

Codepen:

此示例依赖于两个隐藏的

复选框来显示和关闭手风琴，因此它只能使用CSS。收缩和展开标签取决于复选框
：checked
状态

HTML

<section>

    <input type="checkbox" id="dcb1" />
    <h2><label for="dcb1">Div #1 Control bar</label></h2>
    <div>Text of div #1</div>


    <input type="checkbox" id="dcb2" />
    <h2><label for="dcb2">Div #2 Control bar</label></h2>
    <div>Text of div #2</div>

</section>

* {  
  box-sizing: border-box;  
}

section {
   height: 100vh;
   display: flex;
   flex-direction: column; 
}

input[type="checkbox"] {
   position: absolute;
   z-index: -1;
}

h2 {
   margin     : 0;
   padding    : 10px 20px;
   width      : 100%;
   height     : auto;
   overflow   : hidden;
   color      : #fff;
   background : #0085b2;
   cursor     : pointer;
}

div {
   background: #25c8ff;
   height: 0;
   overflow: hidden;
}

input:checked + h2 + div {
   height: auto;
   padding: 20px;
   flex-grow : 1;
}

label:after {
   float: right;
}

input + h2 label:after         { content: "expand" }
input:checked + h2 label:after { content: "shrink" }