title: How to fix text overflow from a flex box
body: <p>I am working with table. height of the row and width of column can be changed (configurable). every time If height/width changes , text within the cell should be vertically/horizontally centered every time .</p>
  <p>I have a working code with css for a cell:</p>
  <pre class="lang-css prettyprint-override"><code>{
    display: flex,
    align-items: center  // vertical alignment
    justify-content: center // horizontal align
  }
  </code></pre>
  <p>The problem here is ,for the cell value 90.45678423 now If i minimize column width. then its looking like that (pic)<a href="https://i.stack.imgur.com/EKgCv.png" rel="nofollow noreferrer">left part getting truncated </a></p>
  <p>I don't want left part of the text truncate on column Resize..and even with minimun width it should<a href="https://i.stack.imgur.com/sjk8f.png" rel="nofollow noreferrer">left part of value shpuld be there</a> be like .</p>
  <p>I have achive this behavior by using css with display block: but problem with this css is , I don't have line height access at this Js code and failed to achieve vertical alignment at middle if user change row height..</p>
  <pre><code>{
    text-align : center // horizontal align
    vertical-align : 'middle' // verical align
    line-height : ? 
  }
  </code></pre>