flexible box layout

by zoho

HTML

<div class="flex">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

CSS

.flex {
  width: 420px;
  height: 250px;
  border: 1px solid #555;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}
.flex > div:nth-child(1) {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  background : #009246;
}
.flex > div:nth-child(2) {
  flex: 2 1 auto;
  -webkit-flex: 2 1 auto;
  background : #F1F2F1; 
}
.flex > div:nth-child(3) {
  flex: 3 1 auto;
  -webkit-flex: 3 1 auto;
  background : #CE2B37; 
}
.flex > div {
  transition: width 0.7s ease-out;
  -webkit-transition: width 0.7s ease-out;
  width: 60px;
}
.flex > div:hover {
  width: 240px;
}