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

这是一个带有上述代码的 codepen，可以用来玩转 HTML/CSS: https://codepen.io/anon/pen/xyNoeq

Answer 1

使用 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>