Flexbox and overflow: hidden not working properly

Answer 1

Your problem is caused by setting the flex-basis of .flex > div to auto. This causes the div to expand to accommodate its content as it has no set dimension along the flex axis. Give it a set value like 20px and the space will be evenly divided because flex-grow is set to 1.

This article should help you get started with the flex layout.

Here is a modified version of your code

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  /* set value for the flex basis, the two properties above will evenly 
  divide the space. */
  flex-basis: 20px;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
  overflow: hidden;
}

.example {
  overflow: hidden;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
  height: 10px;
}