Bootstrap text does not truncate when using flexbox

Question

I'm working on a Bootstrap card using flexbox and can't get text truncation to work. The card text wraps as expected, however, the card title does not truncate when there is not enough space, instead it pushes content outside the card (see screenshot).

Can anyone explain why that happens?

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card d-flex flex-row">
        <a href="#">[Image]</a>
        <div class="card-body d-flex align-items-center">
          <div class="flex-grow-1">
            <a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
            <div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
          </div>
          <small class="align-self-baseline text-nowrap">Lorem ipsum</small>
          <div>[Icon]</div>
        </div>
      </div>
    </div>
  </div>
</div>

See example on jsfiddle

Answer 1

I don't know if it's a bug or a feature to be honest, but it seems that flexbox and text truncation don't play well together.

Without this (min-width), the flex child containing the other text elements won't narrow past the "implied width" of those text elements.

In your particular case I set min-width: 0 to both the .card-body and .flex-grow-1 classes.

jsfiddle