css - Block level elements acting like Flexbox elements -

i've run curious problem when trying create flexbox accordion. problem contents of given accordion act flexbox elements if set display block. best described showing example:

http://codepen.io/jcummins/pen/kpwzny

$('item div.header').click(function(e){    $( ).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 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 remove */ background-color: #fc0;  }  item {    display:flex;    /* formatting styles: safe 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 contents , show when 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 @ 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 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 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 praesentium aliquam quidem @ 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 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 item 1 on 1 line , <contents> on line. instead, seems 50-50 split.

specifically seems rule not doing expect:

.header {   display: block;   width: 100%; } 

display: flex; applies containing element, , tells of it's children should in flex context.

your style rule doesn't add anything, because default .header element block element.

if want flex context elements except header, want wrap elements in additional container, , set that container display: flex;, rather overall main container