Make a column take up available space in a flex container with wrap

I have a layout like this:

.container {  background-color: yellow;  display: flex;  flex-wrap: wrap;}.col-x {  flex: 0 0 5rem;  background-color: red;}.col-y {  flex: 1 0 auto;  background-color: green;}

<div class="container"><div class="col-x">X</div><div class="col-y">Y</div><div class="col-x">X</div><div class="col-y">Y</div></div>

1. Container width is variable
2. col-x is fixed width
3. col-y should should take up the remaining space so that col-x always starts at a new row

col-y is not taking up the full available width with "flex: 1 0 auto". If I set the width of col-y to 100% it wraps to a new row, which is not what I want.

See: https://codepen.io/saurabh0/pen/GgRxVja