Question

在我的测试中（并回答了我其他的SO问题），当flexbox占用页面的整个宽度或具有固定宽度的父元素时，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

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

Answer 2

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

Flexbox中的Flexbox无法使用省略号文本溢出

2 个答案: