how to make ellipsis work with display flex

Question

I don't know why this simple CSS isn't working...

.app{
 display: flex;
cursor: pointer;
}
.test{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  border: 1px solid navy;
  min-width: 0;
}

<div class="app">
  <div class="test">Test Test Test Test Test Test  </div>
</div>

I want ellipsis work with the property display:flex i traied minwidth =0 but it doesnt work

Answer 1

You can't use inline properties for flex component. You can wrap your text by inline component, span for example.

.app{
cursor: pointer;
}
.test{
  display: flex;
  max-width: 100px;
  border: 1px solid navy;
  min-width: 0;
}
.text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="app">
  <div class="test"><span class="text">Test Test Test Test Test Test</span></div>
</div>