0

I've tried multiple solutions for this problem but none of them worked for me. (the min-width hack)

Here's a live example of my issue:

https://jsfiddle.net/d3d9ph9q/3/

As you can see, when i have long text that i want to shrink with an ellipsis it just breaks out of the box as soon as i apply white-space: nowrap

Could someone possibly point out what i'm doing wrong?

Asons
  • 84,923
  • 12
  • 110
  • 165
CodeOverload
  • 47,274
  • 54
  • 131
  • 219
  • Is this what you want: https://jsfiddle.net/d3d9ph9q/1/ – Michael Benjamin Jun 18 '17 at 11:44
  • @Michael_B Sorry updated - the min-width trick doesn't work when the flex box is within another flex box. – CodeOverload Jun 18 '17 at 11:52
  • 1
    Re: `min-width`, it's not a trick or a hack. It's just overriding an initial setting defined by the spec. And it works fine in your layout: https://jsfiddle.net/d3d9ph9q/4/ – Michael Benjamin Jun 18 '17 at 11:55
  • @Michael_B Oh wow Thanks so much!, I didn't know I had to put it in the parent flex boxes too. wish I could select your answer but it's just a comment! – CodeOverload Jun 18 '17 at 11:56
  • 1
    An initial setting on flex items is `min-width: auto`. This means that a flex item is not permitted to be smaller than the length of its content. You can override that setting with `min-width: 0` or `overflow` with any value other than `visible`. – Michael Benjamin Jun 18 '17 at 11:58
  • 1
    You may be overlooking the fact that a flex container can also be a flex item in a larger container, which is the case in your code. – Michael Benjamin Jun 18 '17 at 11:59
  • 1
    Really appreciate the clarification Michael! – CodeOverload Jun 18 '17 at 11:59

0 Answers0