CSS implementation left div fixed width, right div self-adapting to fill the remaining width

(1) using float

 <  div  class  = "Use-float"     >  <  div  ></ div     >  <  div  ></ div  >  </ div  >  

. Use-float>div:first-child {    width:100px;     float:left;} . Use-float>div:last-child {    overflow:hidden;}

--------------------------------------------------------------------------------------------------------------- ---------------

(2) Using table

<Tableclass= "Use-table">    <TR>        <TD></TD>        <TD></TD>    </TR>    </Table>

. Use-table {    border-collapse:collapse;     width:100%;} . Use-table>tbody>tr>td:first-child {    width:100px;}

--------------------------------------------------------------------------------------------------------------- --------------

(3) Simulating table with Div

 <  div  class  = "use-mock-table"     >  <  div  ></ div     >  <  div  ></ div  >  </ div  >  

. Use-mock-table {    display:table;     width:100%;} . Use-mock-table>div {    display:Table-cell;} . Use-mock-table>div:first-child {    width:100px;}

--------------------------------------------------------------------------------------------------------------- --------------

(4) Using Flex

 <  div  class  = "Use-flex"     >  <  div  ></ div     >  <  div  ></ div  >  </ div  >  

. Use-flex {    display:flex;} . Use-flex>div:first-child {    flex:none;     width:100px;} . Use-flex>div:last-child {    Flex:1;}

CSS implementation left div fixed width, right div self-adapting to fill the remaining width