html - Min-height flexbox container -

i want center content inside container horizontally. used min-height & flexbox, in internet explorer solution doesn't work. i can't use simple height, because:

• the layout responsive
• content can have different lengths

in case, content longer container, layout break (when using height - must using min-height...)

i prepare small demo 'hack' ie: http://jsfiddle.net/pujceaam

html

<div id="content" class="flex-center"> <div id="content2">lorem ipsum dolor sit amet, consectetur adipisicing elit. ullam fugit eum modi aspernatur dicta, similique. cupiditate sapiente @ facilis tempore assumenda, eaque inventore veritatis aperiam et tenetur aliquam totam quo sequi dolor illo est amet quibusdam repellat, sed eius voluptate, repudiandae molestiae asperiores! alias omnis aperiam nam perferendis maiores quae minus repellat similique repellendus dolor quos magnam, labore architecto quasi vitae cumque officiis adipisci exercitationem autem eius fugiat. velit nesciunt, excepturi neque. perspiciatis delectus, autem rerum soluta esse, nulla necessitatibus repellat ducimus ex eligendi culpa! iusto, repellat hic aliquam sit illum tempore, adipisci modi? @ doloribus, illum quod perferendis ab dolorum aut, itaque laborum, voluptates nihil ea. quia molestias tempore repudiandae pariatur laudantium ut velit inventore, consectetur distinctio officia deserunt laborum natus sunt voluptates alias corrupti veniam tempora exercitationem, fugiat aliquam provident soluta. provident repellat odit totam aliquam culpa distinctio voluptas expedita ipsa deleniti quasi nesciunt qui eius esse iste debitis vitae ad soluta dolorem, amet, optio aperiam ullam. dolorem ab dolores veniam, dolore, asperiores adipisci enim maiores quas accusantium porro consectetur sapiente officia exercitationem doloremque neque aperiam hic impedit nihil inventore alias ullam voluptatem soluta earum quisquam. obcaecati, sapiente, at. obcaecati eius ex, delectus! atque, ullam et vitae.</div> 

css

.flex-center {     display: -ms-flexbox;     display: -webkit-flex;     display: flex;     -ms-flex-align: center;     -webkit-align-items: center;     align-items: center;     background: rgba(125, 125, 125, .5);     min-height: calc(100vh - 100px); } .va-parent {     width: 100%;     display: table; } .va-children {     display: table-cell;     vertical-align: middle; } 

js

$(function () {      //detect ie     var isie = (window.navigator.mspointerenabled) || (document.all && document.addeventlistener && !window.atob);      //old method vertical align content     function flexible() {         var c1 = $('#content'),             c2 = $('#content2');          if (c1.height() > c2.height()) {             c1.addclass('va-parent');             c2.addclass('va-children');         }     }      //apply old method if ie     if (isie) flexible();  }); 

but don't know if it's solution?
or maybe has idea?

edit: in content can grids, images, tables, lists etc. content - not text :)

truncate string ellipsis

.truncate {   width: 250px;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; }