title: Responsive Square Divs Cross Browser Compatible
body: <p>I have a page that is 50/50 wide.  The left half has a row with six divs.
  Criteria: </p>
  
  <ul>
  <li>6 squares must always remain square.   </li>
  <li>First 5 squares should have margin/padding to right for separation. </li>
  <li>All six squares must stay on same single row. If I can get that to work i can make the needed adjustments for responsiveness in smaller viewports.</li>
  <li>Cross browser compatible for newest version of ie, chrome, and firefox.</li>
  </ul>
  
  <p>My codepen: <a href="https://codepen.io/johnsontroye/pen/zzNVBr" rel="nofollow noreferrer">https://codepen.io/johnsontroye/pen/zzNVBr</a></p>
  
  <p>Image:<br>
  <a href="https://i.stack.imgur.com/98I56.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98I56.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="column" style="margin-right: 20px"&gt;
        &lt;div class="flex-container"&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L1
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L2
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L3
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L4
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L5
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="flex-item"&gt;
            &lt;div class="flex-item-inner"&gt;
              &lt;div class="flex-item-inner-content"&gt;
                L6
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px"&gt;
  
          Other stuff 
  
    &lt;div&gt;
  &lt;/body&gt;
  
  
  .container {
    display: flex;
    flex-direction: row;
    padding: 25px;
    border: 2px red solid;
  }
  
  .column {
    width: 100%;
    height: 100%;
    float: left;
  }
  
  .flex-container {
    padding: 0;
    font-size: 0;
    border: 1px solid black;
    box-sizing: border-box;
  }
  
  .flex-item {
    position: relative;
    display: inline-block;
    height: 0;
    width: 100%;
    padding-top: 100%;
    border: 1px black solid;
    font-size: 20px;
    color: black;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
  }
  @media (min-width: 480px) {
    .flex-item {
      width: 33.3333%;
      padding-top: 33.3333%;
    }
  }
  @media (min-width: 768px) {
    .flex-item {
      width: 16.6666%;
      padding-top: 16.6666%;
    }
  }
  .flex-item-inner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin-right: 25px;
    background: white;
    border: 1px solid red;
    box-sizing: border-box;
  }
  .flex-item-inner-content {
    border: 1px solid orange;
  }
  
  .flex-item:last-child .flex-item-inner {
    margin-right: 0;
    color: green;
  }
  </code></pre>