title: Nested Flexbox Grid
body: <p>I've built a nested flexbox grid that I'll be using for individual gateways. Currently, presumably due to the use of <code>outline</code>, the content within each container is running over into (and being hidden by) the whitespace surrounding each gateway, which acts as spacing between each div.</p>
  
  <p>Is there a better way to handle the grid spacing, which allows me to ensure the content doesn't run over into the div outline? I've included a JSFiddle to illustrates the issue (seen best in the secondary &amp; tertiary gateways).</p>
  
  <p>JSFiddle here: <a href="https://jsfiddle.net/graemebryson/6gehj4v7/" rel="nofollow noreferrer">https://jsfiddle.net/graemebryson/6gehj4v7/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Product Grid --&gt;
  &lt;div class="flex-grid"&gt;
    &lt;div class="flex__direction--column"&gt;
      &lt;div class="flex__direction--row"&gt;
        &lt;!-- Primary Gateway --&gt;
        &lt;div class="item item--primary"&gt;
          &lt;div class="item__description"&gt;
            &lt;h3&gt;Primary Gateway&lt;/h3&gt;
            &lt;p&gt;It is a long established fact that a reader will be distracted by the readable.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item flex__direction--column"&gt;
          &lt;!-- Secondary Gateway --&gt;
          &lt;div class="item item--secondary"&gt;
            &lt;div class="item__description"&gt;
              &lt;h4&gt;Secondary Gateway&lt;/h4&gt;
              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="flex__direction--row"&gt;
              &lt;!-- Tertiary Gateway --&gt;
              &lt;div class="item item--tertiary"&gt;
                &lt;div class="item__description"&gt;
                  &lt;h5&gt;Tertiary Gateway&lt;/h5&gt;
                  &lt;p&gt;It is a long established fact that a reader will be distracted by the readable.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Tertiary Gateway --&gt;
              &lt;div class="item item--tertiary"&gt;
                &lt;div class="item__description"&gt;
                  &lt;h5&gt;Tertiary Gateway&lt;/h5&gt;
                  &lt;p&gt;It is a long established fact that a reader will be distracted by the readable.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>// Grid
  .flex-grid {
    .item {
      flex: 1;
      outline: 5px solid white;
      min-height: 150px;
    }
  }
  
  // Set Flex Direction - Column
  .flex__direction--column {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
  }
  
  // Set Flex Direction - Row
  .flex__direction--row {
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
  }
  </code></pre>