Edit in JSFiddle

<ul>
  <li id="first">1</li>
</ul>

<ul>
  <li id="second">2</li>
</ul>

<ul id="grow">
  <li id="third">3</li>
</ul>

<ul id="grow">
  <li id="forth">4</li>
</ul>

ul {
  display: flex;
  width: 10px;
  height: 80px;
  padding: 4px;
  border: 1px solid #ddd;
}

ul#grow {
    width: 500px;
}

li {
  width: 50px;
  list-style:none;
  border: 1px solid #ddd;
  background: #eee;
}

li#first {
  flex-shrink: 0; 
}

li#second {
  flex-shrink: 1; 
}

li#third {
  flex-grow: 1; 
}

li#forth {
  flex-grow: 0;
}

li + li {
  margin-left: 10px;
}