如何为px指定单元格的宽度？

Question

示例代码

<div class="container">
    <div class="row" style=" display: flex;">
        <div style="width: 200px; height: 50px; background-color: #847"></div>
        <div class="container" style=" height: 50px; background-color: #147">
            <div class="row" style=" height: 20px; background-color: #997">
                <div class="col-xs-3 col-md-6 col-lg-2 " style=" height: 10px; background-color: #927"></div>
                <div class="col-xs-3 col-md-6 col-lg-6" style=" height: 10px; background-color: #947"></div>
            </div>
        </div>
    </div>
</div>

我需要：

1. 子行中有12个缩进的单元格（似乎可以正常工作）
2. 同时，右侧单元格的单元格宽度为px（flex会保存我，但是当我减少浏览器宽度直到结束时，我会看到一些错误，在safari中）

http://codepen.io/anon/pen/zKXaoV

请帮助，也许这不是一个好的解决方案，存在更好的一个或如何解决？感谢