如何使flex表中的一列占用的宽度小于其他列？

Question

我正在尝试使用DIV和flex CSS属性创建HTML表。大概，我所有的行都像

<div class='row'>
  <div class='col'>
    <div class='data-cell'>
      Col A
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      Col B
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      Col C
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      <div class='img-wrapper'>
        <img src='images/delete.png' title='Delete' />
      </div>
    </div>
  </div>

下面是我正在使用的CSS

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid $lightGrey
}

.col {
  display: flex;
  flex-direction: col;
  flex-basis: 100%;
  flex: 1;
}

.header-row {
  color: $eclipse;
  font-weight: bold;
}

.img-wrapper {
  width: 100%;
  text-align: right;
}

现在，每行中的单元格占据行宽的1/4。我想更改的是使与图像的col仅是图像的大小，并使剩余的行甚至分割剩余的空间。我该如何使用DIV和flex？