Prevent flex item from shrinking [duplicate]

Answer 1

Use flex: 1 1; on #left instead of width:100%

#wrap {
  outline: 1px solid fuchsia;
  display: flex;
}

#left {
  background: tan;
  flex: 1 1;
}

#right {
  background: teal;
  width: 50px;
  height: 50px;
}

flex:

Equivalent to flex: 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Source