css flexbox响应式手风琴

Question

我需要使用纯css解决方案构建一个响应式手风琴，场景在图像中说明，与默认手风琴唯一不同的是，用户可以保持两个标签打开，并且它们应该将屏幕分成两半。

这可以使用纯灵活解决方案来实现，这样当隐藏任何div内容时，div应该自动缩小吗？

Answer 1

Codepen：http://codepen.io/anon/pen/LVmNwQ

此示例依赖两个隐藏的return convertView来显示和关闭手风琴，因此它只能使用CSS。 缩小和展开标签取决于复选框checkbox状态

<强> HTML

:checked

<强> CSS

<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>