1

I have a table with some elements inside of the table header. The th elements might have a specific width specified.

There is a wrapper element with display: inline-flex inside of the <th>. One of the flex items inside it has text, which might be multiple words that could break.

If the width of the th is too small to accommodate the text, it will break nicely. However the width of the flex container will not shrink to fit the broken text nicely.

You can see it in action here: https://codepen.io/mydea/pen/ExaeWoX

Summary:

<th class="th" style="width: 230px;">
  <div class='flex-container'>
    <div class="first">
      <img style="height: 40px; width: 40px;" src="..." />
    </div>
    <div class="second">multiple longer words</div>
  </div>
</th>

.th {
  text-align: right;
}

.flex-container {
  display: inline-flex;
  align-items: center;
  text-align: right;
}

The first th shows the issue. The second th has a large enough width that it works as expected. And the last one is without any width specified, for reference.

So in this example here: enter image description here

I'd like there to not be any unnecessary space between the left (green box) flex item and the right flex item with the text in it.

Is that possible? I played around with everything I could think of, but could never get the desired result that:

  1. The flex items are vertically centered (align-items: center)
  2. The flex items do not wrap to a new line
  3. The overall container is right aligned
  4. If the text breaks, there is no unnecessary space between the flex items
Dinshaw Raje
  • 933
  • 1
  • 12
  • 33
Francesco Novy
  • 113
  • 6
  • no this is not possible – Temani Afif Jan 16 '20 at 10:53
  • See https://stackoverflow.com/questions/40097095/inline-block-div-not-shrinking-to-content, https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap/37413580#37413580 for a more in-depth explanation of what the underlying issue is. – 04FS Jan 16 '20 at 10:55

0 Answers0