Problema con flexbox

[techno]

Ciao a tutti sto avendo dei provblemi con il flexbox vi posto il code

CSS:

.list-events {
     display: flex;
     display: -webkit-flex;
     flex-flow: row nowrap;
     -webkit-flex-flow: row nowrap;
     align-items: stretch;
     -webkit-align-items: stretch;
     justify-content: space-between;
     -webkit-justify-content: space-between;
     margin-top: 10px;
}
.list-events>div { 
    background-color: #E0E0E0;
    -o-transition: 0.5s box-shadow; -ms-transition: 0.5s box-shadow;
    display: flex;     display: -webkit-flex;
    flex-direction: column;     -webkit-flex-direction: column;
    width: 32%;
    padding: 10px;
}
.list-events-info { 
    display: flex; display: -webkit-flex;
    flex-direction: column; -webkit-flex-direction: column;
    flex: 1; -webkit-flex: 1;
}
.list-events-info-data { 
    margin-top: auto;
    background-color: #1D649E;
}

HTML:

<div class=\"list-events\">

<div>
<a href=\"\">
<div>...</div>
<div class=\"list-events-info\">
...

    <div class=\"list-events-info-data\">...</div>
</div>
</a>
</div>
</div>

Il problema e che come vedete dalla immagine le colonne non sono adiacenti ma messe una a sinistra e l'atro a destra e il box bludovrebbe essere in basso ma non viene messo in basso.

forum html.jpg