在Flex中折叠文本而不指定width或flex-basis

Question

I need to have a horizontal menu that will collapse text with ellipsis, but doesn't expand to full width. I've gotten it to work fine, except for IE. If I set width or flex-basis, it will work, but then it's not set based on content size anymore. Does anyone have any tips on a workaround? I've googled around for a fix, but nothing I've tried so far has been successful.

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; flex-grow: 0; flex-shrink: 1; flex-basis: auto; text-align: center; min-width: 0; } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div> 

Answer 1

One solution to make IE behave is to add display: flex to the li so it becomes a flex container.

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; /* not needed as it is their default flex-grow: 0; flex-shrink: 1; flex-basis: auto; */ text-align: center; min-width: 0; display: flex; /* fix for IE */ } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { /* display: block; not needed */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div> 

---

Another is to add overflow: hidden to the li .

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; /* not needed as it is their default flex-grow: 0; flex-shrink: 1; flex-basis: auto; */ text-align: center; /* min-width: 0; not needed when overflow:hidden is used */ overflow: hidden; /* fix for IE */ } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div>