Nested Flexbox Grid

Question

I\'ve built a nested flexbox grid that I\'ll be using for individual gateways. Currently, presumably due to the use of outline, the content within each container is

Answer 1

The simplest in this case would be to update the grid rule and either use a border

.flex-grid {
  .item {
    flex: 1;
    min-height: 150px;
  }
  .item--primary, .item--secondary, .item--tertiary {
    border: 2px solid white;
  }
}

or a margin (fiddle)

Stack snippet

.flex-grid .item {
  flex: 1;
  min-height: 150px;
}

.flex-grid .item--primary,
.flex-grid .item--secondary,
.flex-grid .item--tertiary {
  margin: 2px;
  background: lightgray;
}

.flex-grid .item--primary {
  margin-bottom: 0;
}

.flex__direction--column {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
}

.flex__direction--row {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
}

<!-- Product Grid -->
<div class="flex-grid">
  <div class="flex__direction--column">
    <div class="flex__direction--row">

      <!-- Primary Gateway -->
      <div class="item item--primary">
        <div class="item__description">
          <h3>Primary Gateway</h3>
          <p>It is a long established fact that a reader will be distracted by the readable.</p>
        </div>
      </div>

      <div class="item flex__direction--column">
        <!-- Secondary Gateway -->
        <div class="item item--secondary">
          <div class="item__description">
            <h4>Secondary Gateway</h4>
            <p>It is a long established fact that a reader will be distracted by the readable.</p>
          </div>
        </div>
        <div class="item">
          <div class="flex__direction--row">
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Like LGSon said better use a border. Problem is outlines does not take space and have different shapes in different browsers. I would do:

 .item {
    border: 5px solid white; // or transparent
    overflow-wrap: break-word;
  }

or

 .item {
    padding: 5px;
    outline: 5px solid white;
    overflow-wrap: break-word;  
  }