Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container outer">
  <div class="container inner">
    <ul class="container nav-bar">
      <li class="item"><a href="#">Item 1</a></li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
      <li class="item">Item 4</li>
    </ul>
  </div>
  <div class="container inner">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: stretch;
  align-items: stretch;
  
  .inner {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: red;
  }
  
  .item {
    flex-grow: 1;
  }
}

.nav-bar {
  list-style: none;
  width: 100%;
}

SassMeister-output.css

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: stretch;
  align-items: stretch;
}

.container .inner {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: red;
}

.container .item {
  flex-grow: 1;
}

.nav-bar {
  list-style: none;
  width: 100%;
}

SassMeister-rendered.html

<div class="container outer">
  <div class="container inner">
    <ul class="container nav-bar">
      <li class="item"><a href="#">Item 1</a></li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
      <li class="item">Item 4</li>
    </ul>
  </div>
  <div class="container inner">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>