Flex布局中，文字超出隐藏不生效的问题。

当我给一个div容器添加文字超出隐藏时（使用white-space: nowrap;和超出隐藏），盒子的宽度仍被撑大，即使我给该容器设置了宽度(25%)后，超出隐藏效果生效，但盒子依然是撑大状态。

img

该盒子的父元素是一个设置了flex:16;的div，把其width设置为0后效果正常，但不明白其相关原理。

img

想问一下问什么会出现这种问题，感谢解答

相关Demo如下：

html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    * {
      border: 1px solid #ccc;
    }
    .text-ellipsis{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  style>
  
head>

<body>

  <div>

    <div style="display: flex;">
      <div style="flex:4;">leftdiv>
      <div style="flex:16;">rightdiv>
    div>

    <div style="display: flex;">
      <div style="flex:4;">leftdiv>
      <div style="flex:16;">
        <div class="text-ellipsis">
          Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218.jpg
        div>
      div>
    div>
    
  div>
body>

html>

因为在弹性布局中，设置了不换行 所以导致内容无收缩，解决方案可以给文字容器的父元素添加一个min-width: 0 参见链接

Flex布局中，子元素默认会撑开父元素的宽度，这会导致即使子元素设置了宽度并且超出部分被隐藏，父元素的宽度仍然被撑大。因此需要在父元素中设置flex-shrink属性来控制子元素的收缩比例，以避免出现该问题。

可以在包含文本的div容器上添加flex-shrink: 0;的样式，以防止该容器撑开父元素的宽度。代码如下：

<div style="display: flex;">
  <div style="flex:4;">left</div>
  <div style="flex:16;">
    <div class="text-ellipsis" style="flex-shrink: 0;">
      Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218.jpg
    </div>
  </div>
</div>

此时，即使文本容器中的文本超出了容器的宽度，父元素也不会因此被撑开。