CSS: Một Column Cố Định Chiều Dài, Column Còn Lại Dùng Hết Chiều Dài Còn Lại (Fix Width One Column, Other Column Extend The Remain Width)

Bên dưới là một số cách pure css mà ta có thể canh hai column có column bên trái cố định chiều dài còn column bên thì chiếm hết không gian còn lại.

<div class="parent">
  <div class="col-left">column left 200px</div>
  <div class="col-left">column right</div>
</div>

Yêu cầu: Cố định column left 200px, phần còn lại thuộc về column bên phải.

I) Cố định column bên trái.
1. Ta dùng float vs calc trong css

.col-left {
  float: left;
  width: 200px;
  background: yellow;
}
.col-right {
  float: left;
  width: calc(100% - 200px);
  background: red
}

2. Ta dùng float vs margin-left trong css

.col-left {
  float: left;
  width: 200px;
  background: yellow;
}
.col-right {
  margin-left: 200px;
  background: red
}

3. Ta dùng flex-grow vs flex-basis trong css

.parent {
  display: flex;
}
.col-left {
  flex-basis: 200px;
  background: yellow;
}
.col-right {
  flex-grow: 1;
  background: red
}

4. Ta dùng display-table, display-row, display-cell trong css
html

<div class="parent">
  <div class="wrapper-row">
    <div class="col-left">column left 200px</div>
    <div class="col-right">column right</div>
  </div>
</div>

.parent {
  display: table;
  width: 100%;
}
.wrapper-row {
  display: table-row;
}
.col-left {
  display: table-cell;
  background: yellow;
  width: 200px;
}
.col-right {
  display: table-cell;
  background: red;
}

5. Ta dùng table trong html
html

<table>
  <tr>
    <td class="col-left">column left 200px</td>
    <td class="col-right">column right</td>
  </tr>
</table>

css

table {
  width: 100%;
}
.col-left {
  width: 200px;
  background: yellow;
}
.col-right {
  background: red;
}

II) Cố định column bên phải 
Cũng giống như cố định column bên trái, ta hoàn toàn có thể sử dụng kỹ thuật như ở trên I1,  I3, I4, I5.
riêng đối với I2 thì sẽ khác một chút, ta cần dùng thêm direction rtl trong css

<div class="parent">
  <div class="col-left">column right 200px</div>
  <div class="col-right">column left</div>
</div>

.parent {
  direction: rtl;
}
.col-left {
  float: right;
  width: 200px;
  background: yellow;
}
.col-right {
  margin-right: 200px;
  background: red;
}