Collapsing margines na dzieciach schematu flexbox

Question

Mam następujący układ za pomocą schematu flexbox z Flex-wrap i elementów zdolnych do rozciągania za pomocą elastycznego rosnąć:

Każdy element ma margines ze wszystkich stron. To jest oddzielenie elementów od siebie, ale efektem ubocznym jest to, że cały blok ma marginesy, które chciałbym zawalić. Można to zrobić za pomocą reguł takich jak nth-child(-n+3) { margin-top: 0; }, ale ponieważ rozmiar kontenera może się różnić, może być dowolna liczba elementów w rzędzie i dowolna liczba wierszy. Zastanawiam się, czy flex-box nie ma sposobu na zwinięcie zewnętrznych marginesów w takiej konfiguracji, przy jednoczesnym zachowaniu marginesów między elementami.

JSBin

HTML jest po prostu 6 pozycji wewnątrz kontenera.

CSS (Sass) przedstawia się następująco:

.container 
    display: flex 
    flex-wrap: wrap 
    background: #eef 
    align-items: stretch 

.item 
    flex-grow: 1 
    margin: 1em 
    border: 1px solid black 
    padding: 1em 
    min-width: 6em 

Answer 1

Jest to bit hack, ale można dodać ujemną marżę na elastycznego pojemnika, aby anulować out marże elementy wzdłuż krawędzi, a następnie przenieś styl "tła" do elementu opakowania typu parent.

Updated JSBin

Updated CSS (SASS):

.wrapper 
    background: #eef 
    border: 1px solid darkgray 

.container 
    display: flex 
    flex-wrap: wrap 
    margin: -1em 

.item 
    flex-grow: 1 
    margin: 1em 
    border: 1px solid black 
    padding: 1em 
    min-width: 6em