<style type="text/css">
        .row{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: center;
            align-items: stretch;
            height: 50px;
        }
        .p1{
            width: 218px;
            flex-shrink: 0;
            background-color: #3c8dbc;
        }
        .p2{
            width: 1%;
            flex: 1;

            background-color: #5b9909;
        }
    </style>
    
    <p class="row">
        <p class="p1">123123123123123</p>
        <p class="p2">1232131</p>
    </p>

flex anda layak tetapi ingat untuk menambah awalan

Blok di sebelah kiri boleh diletakkan secara mutlak: kedudukan: mutlak; Blok di sebelah kanan berada di margin-kiri secara langsung: 218px; dan kemudian display:block;

1 Induk {display:flex;}, kanan {flex:1}{display:flex;}，右边{flex:1}

2.右边{float:left;width:calc(100% - 218px);}

Sekeping terakhir{

width:calc(100% - 218px);
float: left;

}

Peratusan okay

flex ialah penyelesaian, tetapi banyak kali ia kini diperlukan untuk serasi dengan penyemak imbas rendah seperti IE8, jadi flex tidak boleh dilakukan.
menyediakan penyelesaian lain:
Struktur:

<p class="box">
    <p class="left">left</p>
    <p class="right">right</p>
</p>

Gaya:

.left, .right {
        height: 30px;
    }
    .left {
        float: left;
        width: 200px;
        background: #f90;
    }
    .right {
        background: #369;
        overflow: hidden;
    }