CSS Flexbox Border Radius with text-overflow: Ellipsis - html

Question

I want to apply border radius with flexbox and ellipsis on my list items and also want a min-width like the example below.
<ul>
<li style="flex: 1 1;"><span>A</span></li>
<li style="flex: 2 2;"><span>this is a pretty long text that will overflow the parent container</span></li>
<li style="flex: 1 1;"><span>C</span></li>
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
span {
background-color: blue;
padding: 0em 1em;
border-radius: 1em;
}
Here's the example
http://jsfiddle.net/mnk/kah0bn6o/1/
The goal is to apply the border radius on the element with the ellipsis applied

Answer 1

One way to make it work would be to remove the <span> tags. Put everything into the <li>s.
Try this:
HTML (removed span tags)
<ul>
<li style="flex: 1 1;">A</li>
<li style="flex: 2 2;">this is a pretty long text that will overflow the parent
container</li>
<li style="flex: 1 1;">C</li>
</ul>
CSS
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 0em 1em;
background-color: blue;
border-radius: 2em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
DEMO: http://jsfiddle.net/kah0bn6o/5/
Alternatively, you could keep the spans and simply apply the border-radius rule to both span and li elements.
DEMO: http://jsfiddle.net/kah0bn6o/7/

Answer 2

If you can live without the span then you can just move all the styles on to li instead.
http://jsfiddle.net/f6Lgbtre/
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
background-color: blue;
padding: 0em 1em;
border-radius: 1em;
}
and
<li style="flex: 1 1;">A</li>