1

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>
T. J. Evers
  • 391
  • 1
  • 13
  • 1
    you didn't define any width constraint for the element. ellipsis need to have width limit – Temani Afif Sep 19 '22 at 09:00
  • How do I constrain it to the width of `fixed-content`? Note that in the example, I set the content width to 50 pixels, but in the real world that width isn't known beforehand (it's "fixed" in that it shouldn't be able to shrink or grow) – T. J. Evers Sep 19 '22 at 09:24
  • use `min-width: 100%; width: 0;` with h6 – Temani Afif Sep 19 '22 at 09:26

0 Answers0