Маржа, сжимающаяся в flexbox

Как правило, в CSS, когда у родителя и его последнего дочернего элемента есть маржа, поля сворачиваются для создания единого поля. Например

article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; } footer { background: skyblue; } 

 
  
 Item 1 
 
 Item 2 
    

Как вы можете видеть, хотя 20px указан как для article и для main тегов, вы получаете только 20px margin между последним и нижним колонтитулом .

• Создайте сетку масонства с помощью flexbox (или другого CSS)
• В чем разница между выравниванием и выравниванием элементов?
• Разница между дисплеем: inline-flex и display: flex
• Строки равных высот в макете сетки CSS
• свойство flexbox и wrap

Однако при использовании flexbox мы получаем 40px в 40px между последним и нижним колонтитулом – полный 20p x margin от статьи до основного и еще 20px от основного до нижнего .

 #container { display: flex; flex-direction: column; } article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; } footer { background: skyblue; } 

 
  
 Item 1 
 
 Item 2 
    

Есть ли способ, чтобы поля поля flexbox ведут себя так же, как и non-flexbox?