移动端右边固定宽度左边自适应剩余宽度

<template>
  <div class="content">
    <div class="content-left"></div>
    <div class="content-right"></div>
  </div>
</template>

.content {
    display: -ms-flexbox;
    display: flex;
    background: #141d27;
    font-size: 0;
    color: rgba(255,255,255,0.4);
}
.content .content-left {
    -ms-flex: 1;
    flex: 1;
}
.content .content-right {
    -ms-flex: 0 0 105px;
    flex: 0 0 105px;
    width: 105px;
}

这里用到的是flex布局的方案：

• flex-grow属性
  flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink属性
  flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• flex-basis属性
  flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex属性
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，比如:

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

• 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，比如:（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，比如:

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，比如:

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}