Flexbox равная высота (с разным содержимым) не работает

Question

Я пытаюсь использовать Flexbox для создания сетки для вывода последних сообщений WordPress на моей домашней странице. Но поскольку содержимое внутри каждого окна отличается, высота каждого окна не равна, и это создает проблемы. Я попытался использовать align-item = justify и несколько других рекомендованных параметров, но ничего не работает.

Вот CSS я использую:

.home-latest-posts { 
     display: flex; 
     flex-wrap: wrap; 
} 
.home-latest-posts .post { 
    background: #fff none repeat scroll 0 0; 
    display: inline-flex; 
    flex-direction: column; 
    margin: 0; 
    width: 32%; 
} 
.home-latest-posts .post:nth-child(3n+2) { 
    margin-left: 2%; 
    margin-right: 2%; 
} 
.home-latest-posts .post .entry-title { 
    padding: 1em 3em 0.5em; 
} 
.home-latest-posts .post .entry-content { 
padding: 0 3em 1em; 
} 

Однако, поскольку могут существовать другие коды, которые могут быть интерферирующих, я свяжусь с реальной страницы, чтобы вы, ребята, можете получить всю картину.

Вы можете увидеть вопрос, который у меня есть на этом тестовом сайте (http://moneyrope.com/). Это раздел под заголовком «Последние деньги».

Извините за беспорядок. Это просто тестовый сайт.

Answer 1

Добавить эту часть

.widget-wrap { 
    display: flex; 
    flex-wrap: wrap; 
} 
.home-latest-posts .post { 
    margin-bottom: 3rem; 
} 

Не забудьте prefix весь ваш код. Вы также должны рассмотреть возможность его упаковки внутри min-width @media query