What is replacement of box-orient with the new flexbox?

As per the Google guy's comment here

box-orient (and its webkit variant) is a non-standard property left over from an old version of the flexbox spec. Any bugs with it are probably related to that.

So in the below code I want to remove the following styles display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

and replace them with new flexbox specs, how can I do that the desired result is to clamp lines at 2 lines length as in the demo (text-overflow to ellipsis)

<div style="min-height: 128px;
    border-radius: 7px;
    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);
    border: solid 0.3px rgba(26, 25, 25, 0.15);
    background-color: #ffffff;
    width: 268px;
    margin-bottom: 13px;">

  <div style="overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5.6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;">
    Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make
    this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?

  </div>

</div>

Note: The reason for this change is that this style doesn't work when the html element is hidden at default as mentioned in this Github issue. Working Angular Demo here

from What is replacement of box-orient with the new flexbox?