Ellipsis (with min-width: 0 and overflow: hidden) not working inside flexbox

Issue

This Content is from Stack Overflow. Question asked by T. J. Evers

Here we go again. Another person that is having trouble getting ellipsis to work inside a flexbox.

I’ve read every question and answer that might (and probably will) cause this question to be marked as a duplicate. To no avail.

The problem: I’ve got a row of flexboxes (just one in the example, for simplicity) containing a header and some fixed size contents. I need the header to be shrunk down to be as small as the content.

In other words: get “Some long header” to shorten to “Some lo…”

I’ve tried every combination of overflow: hidden;, min-width: 0; and text-overflow: ellipsis; that I could find, but the container flexbox won’t compress the header. Ever.

What am I missing here?

In general: how can I prevent problems like this, i.e. use flexboxes that can shrink their contents beyond their “minimum” width?

.page
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;

  min-width: 0;
  overflow: hidden;
}

h6
{
  display: inline-block;
  background: green;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.fixed-content
{
  background: red;
  width: 50px;
  height: 100px;
}
<div class="page">
<div class="container">
<h6>Some long header</h6>
<div class="fixed-content"/>
</div>
</div>



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?