Im trying to create the same gallery with expander very similar to Google images layout where it expands when you click on the tile.I am however trying to do this with flexbox, but running into an issue where i need to have the expanded section full screen width. the problem is that it aligns with the sibling. i made a fiddle to show what im trying to achieve and what the problem is.Fiddle of flexbox gallery layoutherewith the current code layout  <div class=wrapper><div class=header>  <h1>Header Section</h1></div><div class=content>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander viible>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander visible>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div>  <div class=item>    <div class=item-inner>      <div class=item-header>header contnet</div>      <div class=item-body>body content</div>    </div>    <div class=item-expander hidden>content of expander</div>  </div></div>
Google type image gallery layout with flexbox
css;html5;layout