Text overflow doesn't work on list-item with secondary buttons

[gpopovic]

Secondary buttons are ignored and text goes over them

http://codepen.io/anon/pen/YqqmXL

[devversion]

Can reproduce - I already have a solution for that, but I'm thinking about the general structure of secondary items now.

Currently a secondary item is always set to an absolute position, and that also causes overflow issues. So now I'm trying to find the best solution for the secondary items behavior.

[topherfangio]

I'm not sure if we want to do this in the 1.x series, but something to think about for 2.x would be to rewrite this to use flex positioning instead of absolute.

Ideally, the left/right icons would take up however much space they take up, and the text in the middle would flex to the right size.

Again, I think this is probably too big of a change for a 1.x release, but maybe not.

[devversion]

@topherfangio Yes, an absolute position is not good, because then we can't set the overflow correctly. I think, we're able to fix this by using a static position, but this requires the button wrap to be absolute.

But my solution, is to move the secondary container into the container wrap, this will fix the overflow issue, but requires a lot of work in aligning the padding / margin correctly.

[Nextt1]

@gpopovic You can use flex attribute with p element to get somewhat of a desired result. http://codepen.io/next1/pen/WwGoBE