Flexbox во flexbox не работает с переполнением текста многоточия

Question

В моем тестировании (и в ответе на другие мои вопросы SO) flexbox хорошо работает с переполнением текста, когда он занимает всю ширину страницы или имеет родительский элемент фиксированной ширины. Однако, если flexbox с динамической шириной находится в другом flexbox с динамической шириной, он не поддерживает overflow: hidden (и, следовательно, переполнение текста) правильно и всегда использует максимальную ширину его содержимого. Есть ли способ исправить это без установки определенной ширины родительского элемента? Вот полный пример:

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;
}

<!-- 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>

Вот кодовая ручка с приведенным выше кодом, чтобы поиграть с HTML / CSS: https://codepen.io/anon/pen/xyNoeq

Answer 1

Сделайте расчет ширины вашего .main элемента более точным. Только когда он находится внутри элемента .container. Я просто добавил несколько строк 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;
}

/* Added */
.container .main {
  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;
}

<!-- 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>

Answer 2

используйте display:inline-grid вместо display:flex для класса .toolbar , как показано ниже:

.toolbar {
    display: inline-grid;
}

Вот обновленный фрагмент:

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: inline-grid;
  background: #eeeeee;
  height: 60px;
  align-items: center;
  padding: 0 10px;
}

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

<!-- 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>