flex1时内容溢出

目标效果：右边黄色部分填充减去红色部分的剩余部分

原理: flex: 1

代码：

<div class="box">
    <div class="inner-left">div>
    <div class="inner-right"><span class="inner-right-content">1111111111111111111111111111111111111111111111111span>div>
  div>
1
2
3
4

.box {
      display: flex;
      align-items: center;
      justify-items: center;
      width: 300px;
      height: 100px;
      border: 1px solid black;
    }

    .inner-left {
      width: 100px;
      height: 20px;
      background-color: red;
    }

    .inner-right {
      flex: 1;
    }

    .inner-right-content {
      display: inline-block;
      width: 100%;
      height: 20px;
      background-color: yellow;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

实际效果：黄色部分超长并将红色部分挤出容器

原因：
flex为flex-grow / flex-shrink / flex-basis的简写
flex: 1 时 flex-basis 为 auto;

flex-grow 项在 flex 容器中分配剩余空间的相对比例，主尺寸是项的宽度或高度，这取决于flex-direction值。
剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。
flex-basis 属性 取值 content 或者 <'width'>.
width 值可以是 ; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto（即项目本来的大小）。
content: 基于 flex 的元素的内容自动调整大小。

再来看我们的例子：
红色：100px
黄色：460px

可以看到目前flex-basis 为默认的 auto，即项目本来的大小。我们可为其设置width，因为我们需要占位的地方<=200, 所以width设为0-200皆可。因为又是左边red部分为自适应，不一定能计算出右边黄色部分所需占用宽度，所以通常设置width: 0就好啦。

.inner-right {
   flex: 1;
   width: 0;
 }
1
2
3
4

如图：