In my testing (and as answered by my other SO questions), flexbox works well with overflowing text when it's consuming the full width of the page or having a fixed width parent element.
However, if a flexbox with dynamic width is within another dynamic width flexbox, it doesn't support `overflow: hidden` (and thus text-overflow) correctly and always uses the maximum width of its contents. Is there a way to fix this without setting a specific width on the parent element? Here's a full example:

```css
body {
  font-family: sans-serif;
  font-size: 20px;
}

.container {
  display: flex;
  height: 500px;
  max-width: 100%;
  margin-top: 2em;
}

.aside {
  flex: 0 0 220px;
  background: black;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*width: calc(100% - 220px)*/
}

.toolbar {
  display: flex;
  background: #eeeeee;
  height: 60px;
  align-items: center;
  padding: 0 10px;
}

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

```html
<!-- Works -->
<div class="main">
  <div class="toolbar">
    <div class="title">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<!-- Doesn't work without setting width of .main -->
<div class="container">
  <div class="aside">
  </div>

  <div class="main">
    <div class="toolbar">
      <div class="title">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
</div>
```

Here's a codepen with the above code to play around with the HTML/CSS:
<https://codepen.io/anon/pen/xyNoeq>