Flexbox in flexbox not working with ellipsis text overflow

Question

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:

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>

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

Add `overflow: hidden` to `.main` ? https://codepen.io/anon/pen/LgKyvY — sol, Oct 31 '18 at 07:33

score 3 · Answer 1 · answered Oct 31 '18 at 07:31

use display:inline-grid instead of display:flex to class .toolbar as shown below:

.toolbar {
    display: inline-grid;
}

Here's the updated snippet:

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>

Most welcome @JDoe please accept this answer if it works for you :) — Vikas Jadhav, Oct 31 '18 at 19:13

score 1 · Answer 2 · answered Oct 31 '18 at 07:41

Make the calculation of the width of your .main element more specific. Only when it is inside the .container element. I just added a few lines of 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>

This was just an example, the aside element can also have a dynamic width, so this option wouldn't work well. The other answers work without setting a fixed width. — JDoe, Oct 31 '18 at 17:12

Flexbox in flexbox not working with ellipsis text overflow

2 Answers2

Linked