Flexbox背景不包括橫向溢出的兒童

我有一個具有最小寬度的（先驗未知）數量的子容器的父容器。當我縮小瀏覽器的大小時，父窗口隨窗口縮小，不包括兒童。Flexbox背景不包括橫向溢出的兒童

.row{ 
    display:flex; 
    background-color:#fcc; 
    background-size:cover; 
} 
.row:nth-child(odd){ 
    background-color:#fbb; 
} 
.child{ 
    min-width:150px; 
    border:1px #ccc solid; 
    flex-grow:1; 
}

<div class="row"> 
    <div class="child"> content </div> 
    <div class="child"> content </div> 
    <div class="child"> content </div> 
</div> 
<!--more rows follow-->

jsfiddle

我怎麼會去確保母公司的背景涵蓋了所有的孩子嗎？

我嘗試在.row元素上放置width:100%,background-size:cover。還嘗試在容器中包裝所有東西，並設置overflow:auto。

我可以讓它工作的唯一方法是，如果我把overflow:auto放在.row元素上，但是然後它使得每行都可以水平滾動而不依賴於其他行。

我已經看到this的帖子，但它不完全是我需要的 - 我沒有包裝任何彈性項目，重點是讓他們保持它們的方式。

我也讀this文章，但我看不到任何可以幫助我的問題。

來源

2016-04-01 andrei