CSS 布局样式一: 左侧宽度不确定, 右侧铺满剩余宽

实现效果如下:

css

.box {
    border: 1px solid #aaa;
    display: flex;
    height: 50px;
}
.left {
    flex: 0 0 auto;
}
.right {
    flex: 1 1 auto;
    background: #f00;
}
复制代码

<div class="box">
        <div class="left">左侧的</div>
        <div class="right"></div>
</div>
<div class="box">
        <div class="left">bguyhuyhuhuhyuhu</div>
        <div class="right"></div>
</div>
复制代码