Flex pratiği için WhatsApp'ın arayüzünü yazıyordum ve aşağıdaki sorunla karşılaştım.

http://puu.sh/ECzW9.jpg Bunun çaresi nedir doktor?

Görselde görüldüğü üzere contacts kısmındaki her contact üst üste görünüyor.

Normal görünüm: http://puu.sh/ECzZn.jpg

CSS Kodlarım

.sidebar {

width: 30%;
min-width: 300px;
background: #fff;
height: 100%;
border-right: #ddd 1px solid;
display: flex;
flex-direction: column;

}

.contacts {

width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
flex: 1;

}