Block level elements acting like Flexbox elements - css

Question

I've run into a curious problem when trying to create a flexbox accordion. The problem is that sometimes the contents of a given accordion will act like flexbox elements even if I set display to block. This is best described by showing an example:
http://codepen.io/jcummins/pen/KpWzNY
$('item div.header').click(function(e){
$( this ).parent().toggleClass( "active" );
});
body {
height:100%;
width:100%;
background-color: #ccc;
margin:0;
padding:0;
}
container {
display:block;
position:absolute;
height: 100%;
width: 100%;
/* Formatting styles: safe to remove */ background-color: #999;
}
items {
height:100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
box-pack:top;
box-align:center;
/* Formatting styles: safe to remove */ background-color: #fc0;
}
item {
display:flex;
/* Formatting styles: safe to remove */
box-shadow:0 1px 3px rgba(0,0,0,.3);
margin-bottom: 6px;
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
border-bottom: 3px green solid;
background:#fff;
border-radius:5px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, sans-serif;
font-weight:bold;
}
.active {
-webkit-box-flex: 9;
-moz-box-flex: 9;
box-flex: 9;
}
.header {
display:block;
width:100%;
}
/* Hide the contents and only show it when the selected menu becomes active */
contents {
display:none;
overflow:scroll;
}
.active contents {
display:block;*/
/*width:100%;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container>
<items>
<item>
<div class="header">Item 1</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quos enim explicabo non ipsum dicta minima, architecto, aliquid iusto itaque repudiandae tenetur aliquam nihil odio. Distinctio alias maxime aperiam impedit.</div>
<div>Quasi aliquam inventore hic veniam nobis nesciunt ratione quod unde, excepturi reprehenderit, error. Fuga tempora excepturi voluptas nihil labore veniam animi! Possimus distinctio ea molestias voluptate aspernatur corrupti porro libero!</div>
<div>Nostrum deserunt quia modi necessitatibus id ipsum asperiores. Facilis suscipit, nisi culpa veritatis iusto autem iste eos dolore quibusdam ex quis dolorum blanditiis ipsa at architecto earum cum cumque dolor.</div>
<div>Eaque, libero, nihil. Accusantium corporis id fugit doloremque reiciendis temporibus, cumque minus, aliquid aperiam qui voluptates! Ipsum repudiandae inventore porro iusto mollitia, ex aliquid reiciendis quisquam odit ea, eligendi illo?</div>
<div>Enim, vitae natus distinctio adipisci rem possimus minus aliquid voluptas corporis velit, ipsa, est eligendi alias veniam fugit eius non hic quibusdam quod placeat dolorum laboriosam, quaerat explicabo. Sint, odio.</div>
</contents>
</item>
<item class="active">
<div class="header">Item 2</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nobis soluta architecto similique molestiae saepe porro accusamus natus ab, eum nihil quidem tempore harum suscipit autem voluptates, quia quae aliquam.</div>
<div>Dolorum ut mollitia nisi. Sapiente necessitatibus, ducimus minima commodi suscipit dolor modi dolorum ipsa, dolores, aliquid porro neque voluptas a cupiditate blanditiis qui sed est iste dolore eos rerum doloremque!</div>
<div>Minima itaque ad officia quas dolore expedita, ab hic tempora, enim cum consectetur! Doloribus ut, reiciendis ipsam veniam voluptates, labore voluptatem perferendis earum illo voluptatum inventore a voluptas porro cum?</div>
<div>Perferendis quasi nesciunt laboriosam debitis veniam quisquam officiis est, cumque ut consectetur quod eligendi odio ab sapiente! Vel laboriosam quisquam odit, doloremque veritatis reiciendis perspiciatis molestiae illum repellendus, velit amet.</div>
<div>Numquam ipsum, dolorum, nihil perspiciatis aspernatur blanditiis explicabo corporis assumenda dolorem facilis debitis et est fuga sit. Totam, veniam unde soluta rem recusandae explicabo, enim, modi pariatur tempore repellendus quo!</div>
<div>In, nisi minima ex autem consequatur. Sequi mollitia, velit officiis nisi, eos laudantium quibusdam accusamus dolores dicta tenetur vitae pariatur rem consequatur a praesentium aliquam quidem at fuga eligendi quam!</div>
<div>Minima minus impedit iste, deleniti asperiores nulla est, nisi optio repudiandae ducimus, corporis aperiam. Quod neque magnam, provident minima minus corporis debitis officiis laborum voluptas consectetur accusantium numquam placeat eum.</div>
<div>Labore maxime exercitationem, pariatur quaerat, nisi repellat ad reprehenderit modi et sint eum veniam iure odio dignissimos, ullam. Culpa quos, est dolorum dolores asperiores quia commodi laudantium tempora doloribus soluta.</div>
<div>Aspernatur voluptatem, dolorem vel eligendi. Veritatis, ut eius officia cupiditate dicta quisquam dolores voluptatem, quo saepe. Sequi ducimus quo provident tempore accusamus alias ipsum soluta consequatur quidem, aut, et, dolorum.</div>
<div>Doloribus beatae excepturi, et sunt libero laborum. Eius perspiciatis vitae, corporis temporibus molestias eum sit dolorum eos a fugit maiores earum suscipit labore, adipisci magnam reiciendis animi rerum culpa inventore.</div>
<div>Optio itaque fugit dolorum, labore inventore. Illo beatae, quas eius dolorem quasi, quaerat. Voluptatibus laboriosam, laudantium, similique corrupti minus, tempora explicabo atque aspernatur ab, possimus quibusdam adipisci mollitia iste neque.</div>
<div>Accusamus vel dolorem libero consectetur facere, quo quod maiores, illum enim tenetur! Odio dicta repellendus, earum optio officiis consequatur dolore laboriosam fugit laudantium ad harum distinctio nesciunt accusantium vero, quaerat.</div>
<div>Eaque voluptatibus excepturi minima fuga ab voluptas ex dolore perspiciatis earum. Fugit eius natus, libero voluptates sunt autem quod consequuntur tempore! Velit rem tenetur est molestias quod quae modi inventore.</div>
<div>Quasi, quo nulla, hic ut veniam tempora dolorum veritatis eum animi repudiandae nisi eaque numquam temporibus consequatur odio voluptatum obcaecati mollitia neque amet, sunt quidem iure laboriosam eveniet. Quo, quas!</div>
<div>Officia fuga ipsum ullam deserunt rem praesentium quasi! Alias consectetur esse nobis commodi nam, placeat nesciunt, aspernatur quia asperiores officia fugiat delectus, nulla corporis saepe distinctio culpa aliquid adipisci amet.</div>
</contents>
</item>
<item>Item 3</item>
<item>Item 4</item>
<item>Item 5</item>
</items>
</container>
My expected behavior would be that Item 1 would be on one line and the <contents> would be on another line. Instead, it seems to be a 50-50 split.
Specifically it seems that this rule is not doing what I expect:
.header {
display: block;
width: 100%;
}

Answer 1

display: flex; applies to the containing element, and tells it that all of it's children should now be in a flex context.
Your style rule doesn't actually add anything, because by default the .header element is already a block element.
If you want a flex context for all elements except the header, you will likely want to wrap only those elements in an additional container, and set that container to be display: flex;, rather than overall main container

Answer 2

My expected behavior would be that Item 1 would be on one line and the
<contents> would be on another line.
That doesn't happen because the initial value of flex-wrap is nowrap. If you want multiple lines, use wrap:
item {
flex-wrap: wrap;
}
$('item div.header').click(function(e){
$( this ).parent().toggleClass( "active" );
});
body {
height:100%;
width:100%;
background-color: #ccc;
margin:0;
padding:0;
}
container {
display:block;
position:absolute;
height: 100%;
width: 100%;
/* Formatting styles: safe to remove */ background-color: #999;
}
items {
height:100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
box-pack:top;
box-align:center;
/* Formatting styles: safe to remove */ background-color: #fc0;
}
item {
display:flex;
flex-wrap: wrap;
/* Formatting styles: safe to remove */
box-shadow:0 1px 3px rgba(0,0,0,.3);
margin-bottom: 6px;
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
border-bottom: 3px green solid;
background:#fff;
border-radius:5px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, sans-serif;
font-weight:bold;
}
.active {
-webkit-box-flex: 9;
-moz-box-flex: 9;
box-flex: 9;
}
.header {
display:block;
width:100%;
}
/* Hide the contents and only show it when the selected menu becomes active */
contents {
display:none;
overflow:scroll;
}
.active contents {
display:block;*/
/*width:100%;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container>
<items>
<item>
<div class="header">Item 1</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quos enim explicabo non ipsum dicta minima, architecto, aliquid iusto itaque repudiandae tenetur aliquam nihil odio. Distinctio alias maxime aperiam impedit.</div>
<div>Quasi aliquam inventore hic veniam nobis nesciunt ratione quod unde, excepturi reprehenderit, error. Fuga tempora excepturi voluptas nihil labore veniam animi! Possimus distinctio ea molestias voluptate aspernatur corrupti porro libero!</div>
<div>Nostrum deserunt quia modi necessitatibus id ipsum asperiores. Facilis suscipit, nisi culpa veritatis iusto autem iste eos dolore quibusdam ex quis dolorum blanditiis ipsa at architecto earum cum cumque dolor.</div>
<div>Eaque, libero, nihil. Accusantium corporis id fugit doloremque reiciendis temporibus, cumque minus, aliquid aperiam qui voluptates! Ipsum repudiandae inventore porro iusto mollitia, ex aliquid reiciendis quisquam odit ea, eligendi illo?</div>
<div>Enim, vitae natus distinctio adipisci rem possimus minus aliquid voluptas corporis velit, ipsa, est eligendi alias veniam fugit eius non hic quibusdam quod placeat dolorum laboriosam, quaerat explicabo. Sint, odio.</div>
</contents>
</item>
<item class="active">
<div class="header">Item 2</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nobis soluta architecto similique molestiae saepe porro accusamus natus ab, eum nihil quidem tempore harum suscipit autem voluptates, quia quae aliquam.</div>
<div>Dolorum ut mollitia nisi. Sapiente necessitatibus, ducimus minima commodi suscipit dolor modi dolorum ipsa, dolores, aliquid porro neque voluptas a cupiditate blanditiis qui sed est iste dolore eos rerum doloremque!</div>
<div>Minima itaque ad officia quas dolore expedita, ab hic tempora, enim cum consectetur! Doloribus ut, reiciendis ipsam veniam voluptates, labore voluptatem perferendis earum illo voluptatum inventore a voluptas porro cum?</div>
<div>Perferendis quasi nesciunt laboriosam debitis veniam quisquam officiis est, cumque ut consectetur quod eligendi odio ab sapiente! Vel laboriosam quisquam odit, doloremque veritatis reiciendis perspiciatis molestiae illum repellendus, velit amet.</div>
<div>Numquam ipsum, dolorum, nihil perspiciatis aspernatur blanditiis explicabo corporis assumenda dolorem facilis debitis et est fuga sit. Totam, veniam unde soluta rem recusandae explicabo, enim, modi pariatur tempore repellendus quo!</div>
<div>In, nisi minima ex autem consequatur. Sequi mollitia, velit officiis nisi, eos laudantium quibusdam accusamus dolores dicta tenetur vitae pariatur rem consequatur a praesentium aliquam quidem at fuga eligendi quam!</div>
<div>Minima minus impedit iste, deleniti asperiores nulla est, nisi optio repudiandae ducimus, corporis aperiam. Quod neque magnam, provident minima minus corporis debitis officiis laborum voluptas consectetur accusantium numquam placeat eum.</div>
<div>Labore maxime exercitationem, pariatur quaerat, nisi repellat ad reprehenderit modi et sint eum veniam iure odio dignissimos, ullam. Culpa quos, est dolorum dolores asperiores quia commodi laudantium tempora doloribus soluta.</div>
<div>Aspernatur voluptatem, dolorem vel eligendi. Veritatis, ut eius officia cupiditate dicta quisquam dolores voluptatem, quo saepe. Sequi ducimus quo provident tempore accusamus alias ipsum soluta consequatur quidem, aut, et, dolorum.</div>
<div>Doloribus beatae excepturi, et sunt libero laborum. Eius perspiciatis vitae, corporis temporibus molestias eum sit dolorum eos a fugit maiores earum suscipit labore, adipisci magnam reiciendis animi rerum culpa inventore.</div>
<div>Optio itaque fugit dolorum, labore inventore. Illo beatae, quas eius dolorem quasi, quaerat. Voluptatibus laboriosam, laudantium, similique corrupti minus, tempora explicabo atque aspernatur ab, possimus quibusdam adipisci mollitia iste neque.</div>
<div>Accusamus vel dolorem libero consectetur facere, quo quod maiores, illum enim tenetur! Odio dicta repellendus, earum optio officiis consequatur dolore laboriosam fugit laudantium ad harum distinctio nesciunt accusantium vero, quaerat.</div>
<div>Eaque voluptatibus excepturi minima fuga ab voluptas ex dolore perspiciatis earum. Fugit eius natus, libero voluptates sunt autem quod consequuntur tempore! Velit rem tenetur est molestias quod quae modi inventore.</div>
<div>Quasi, quo nulla, hic ut veniam tempora dolorum veritatis eum animi repudiandae nisi eaque numquam temporibus consequatur odio voluptatum obcaecati mollitia neque amet, sunt quidem iure laboriosam eveniet. Quo, quas!</div>
<div>Officia fuga ipsum ullam deserunt rem praesentium quasi! Alias consectetur esse nobis commodi nam, placeat nesciunt, aspernatur quia asperiores officia fugiat delectus, nulla corporis saepe distinctio culpa aliquid adipisci amet.</div>
</contents>
</item>
<item>Item 3</item>
<item>Item 4</item>
<item>Item 5</item>
</items>
</container>