0

I'm trying to make my SPANs to expand and shrink evenly and hide the overflow if the space runs out. For some reason, they behave differently than expected, as presented in the fiddle.

a.action-button {
  display: flex;
  flex: 1 1 0;
  justify-content: space-between;
  border: 4px solid thistle;
}

a.action-button>span {
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

I can't explain why the components don't shrink thistle colored ones. I'm also surprised that the royalblue one gets hidden on overflow despite the style not being set to that. I sense there's a connection between those two but I can't explain how.

DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • I think the example and the problem are rather vague, but aren't you looking for flex-shrink and flex-grow properties? – Sven van de Scheur Aug 25 '19 at 15:28
  • @SvenvandeScheur Not sure what's the vague part, exactly. Feel free to elaborate. As for the properties you mentioned, those are present in the sample provided. Seemingly, not working on a 1-to-1 scale while shrinking (expanding seem sot work, though). Please explain what I can make clearer. – DonkeyBanana Aug 25 '19 at 15:34
  • Maybe you're looking for `min-width` overrides. Add `min-width: 0` to your flex items that don't already have `overflow: hidden`. https://jsfiddle.net/c3gs4a6n/ – Michael Benjamin Aug 25 '19 at 19:09

0 Answers0