text-overflow is not working when using display:flex

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>
Output: ThisIsASamp  
Expected: ThisIsASam...

When i remove the flex property it is working fine.

I would like to know why the flex affect the ellipsis.

TIA


Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.

Try moving the truncate properties to a separate .flex-child class like so:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/


You can do something like this

.flex-container {
  display: flex;
}

.flex-container p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
  ThisIsASampleText </p>
</div>