flex item exceed box

by weijarz

HTML

<div class="parent">
  <div class="col col-1">
    One
  </div>
  <div class="col col-2">
    <div class="c">Twooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
  </div>
</div>

CSS

.parent {
  display: flex;
  width: 200px;
  border: 5px solid blue;
}
.col {
	display: block;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
  padding: 10px;
}
.col-1 { flex: none; background: yellow; }
.col-2 {
	background: red;
}
.c {
  background: cyan;
 }