Truncate overlapping text in an overflow:hidden container

Question

I have a flexbox container which has some columns, columns having content and content container has a fixed height and I use overflow: hidden to hide overflowing text. As the example shows sometimes I deal on bottom some overlapping text which I would like to truncate. What is the best applicable workaround in this case.

(function($) {
    "use strict";

    const TILE_MAX_HEIGHT = 288;
    const TILE_MIN_HEIGHT = 268;

    var ArticleTile = {
        init: function() {
            this.$tiles = $('.flex__teaser');
            this.iterateTiles();
        },

        iterateTiles: function () {
            var self = this;

            this.$tiles.each(function () {
                var $titleHeight = $(this).find('h1').outerHeight(),
                    $teaserHeight = $(this).find('.flex__content');

                if($titleHeight >= TILE_MIN_HEIGHT) {
                    self.hideTeaser(this)
                }
            })
        },

        hideTeaser: function (el) {
            $(el).find('.flex__content').addClass('hide');
        },

        ellipseContent: function (content) {

        }
    };

    $(document).ready(function() {
        ArticleTile.init();
    });


})($);

.main__content {
  width: calc(965px);
  margin-left: auto;
  margin-right: auto;
}
.flex__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.flex__container:after {
  content: "";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 380px;
          flex: 0 0 380px;
}
.flex__base {
  -ms-flex-preferred-size: 365px;
      flex-basis: 365px;
  max-width: 365px;
  margin-bottom: 50px;
}
.flex__tile {
  height: 290px;
  overflow: hidden;
}
.flex__title {
  font-family: serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 1.3px;
  font-size: 64px;
  line-height: 1.17;
  color: #4e4e4e;
  margin: 18px 0;
  font-size: 36px;
  padding-bottom: 18px;
}
.flex__content {
  text-decoration: none;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: 0.4px;
}

}
.flex__tile {
  height: 290px;
  overflow: hidden;
}
.flex__title {
  line-height: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main__content">
  <div class="flex__container">
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum scelerisque, in mollis sapien efficitur.</h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum scelerisque.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
             Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
</div>  
</div>