Flexbox style

messages starts from bottom

by Abhay Singh

HTML

<div class="main" flex>
<div class="msgmain msg2">
test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain test msgmain 

</div>
<div class="msgmain">
test1
</div>
<div class="msgmain msg2">
test
</div>
<div class="msgmain">
test1
</div>
<div class="msgmain msg2">
test
</div>
</div>

CSS

[flex] {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.main {
     display: -webkit-flex;
    display: flex;
    background: #FFD54F;
    overflow: hidden;
    width: 100%;
    padding: 3px;
    min-height: 400px;
    
        -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
.msgmain {
display: inline-block;
    background: white;
    overflow: hidden;
    margin: 3px;
    padding: 5px;
    
        width: 100%;
    -webkit-order: 0;
    order: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    -webkit-align-self: auto;
    align-self: auto;
 }