CSS Layout Style 1: The left width is uncertain, and the right side is full of remaining width

The implementation effect is as follows:

css

.box {
    border: 1px solid #aaa;
    display: flex;
    height: 50px;
}
.left {
    flex: 0 0 auto;
}
.right {
    flex: 1 1 auto;
    background: #f00;
}
Copy the code

<div class="box">
        <div class="left">On the left side of the</div>
        <div class="right"></div>
</div>
<div class="box">
        <div class="left">bguyhuyhuhuhyuhu</div>
        <div class="right"></div>
</div>
Copy the code