.flex-container > div {
  flex:2;
}

The selector above has class name and tag name, therefore it's more specific than this selector:

.search {
  flex:4;
}

That's why the second selector has no effect in this example. With more specific selector, like this:

.flex-container .search {
  flex:4;
}

the .search item will be twice as wide as the other flex items.