具有大量需求的样式表

Question

我对表

有这样的要求

• 第1列最小宽度为100px，如果其他要求正常则动态调整大小
• 第二列最小宽度155px，如果其他要求正常，则动态调整大小
• 第3至第5列最小宽度为92px，如果其他要求正常则动态调整大小
• 所有5列应该适合整个可用宽度（您可以假设在codepen上是1200px）

看起来我几乎就在那里，但最后我要做的是保持一列颜色的列宽相同。

这是我到目前为止所做的 http://codepen.io/anon/pen/NjYZwX

HTML     

  <div class="table-row">
    <div class="channel">Vasan</div>
    <div class="progress-cell">Subramanian asdasdasdasd</div>
    <div class="num" title="vasan@example.com">vasan@example.com</div>
    <div class="num">January 14, 1996</div>
    <div class="num">1,024</div>

  </div>

  <div class="table-row">
    <div class="channel">Firstnsdfsdfsdfa sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme sdfsdfsdme</div>
    <div class="progress-cell">Lastname</div>
    <div class="num" title="ns@example.org">ns@example.org</div>
    <div class="num">February 31, 1948</div>
    <div class="num">2,484</div>
  </div>

  <div class="table-row">
    <div class="channel">Example</div>
    <div class="progress-cell">McDude</div>
    <div class="num" title="N/A">--</div>
    <div class="num">December 31, 1960</div>
    <div class="num">0</div>
  </div>

</div>

CSS

.total-width {
  width: 1200px;
}
.table-row {
  display: flex;           display: -webkit-flex;
  flex-direction: row;     -webkit-flex-direction: row;
  flex-grow: 0;            -webkit-flex-grow: 0;
  flex-wrap: nowrap;         -webkit-flex-wrap: nowrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.channel {
  flex-grow: 1;            -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 5px;
  max-width:100%;
  min-width: 100px;
  background: red;  
}

.progress-cell {
  flex-grow: 1;            -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width:100%;
  min-width: 155px;
  background: green;
}

.num {
  flex-grow: 1;            -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width:100%;
  min-width: 92px;
  background: yellow;
}

更新

也许下面的图片会显示我需要的东西