Google type image gallery layout with expanding section using flexbox

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 layout

herewith the current code layout:

 * {
 padding: 0;
 margin: 0;
 outline: 0 none;
 }

 body {
 font-size: 14px;
 font-family: 'Open Sans';
 }


 .content {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 }


 .item {
 display: flex;
 flex-direction: column;
 width: 20%;
 }

 .item-inner {
 border: 1px solid #d2d2d2;
 padding: .5em;
 }

 .item-expander {
 background: #666;
 color: white;
 padding: 2em;
 }



 /* helpers*/

 .hidden {
 display: none;
 visibility: hidden;
 }

 .visible {
 display: flex;
 visibility: visible;
 }
 <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 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 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>


Use flex: 1 100%; to make it full width. Hope this will help you.