How to stretch and center an element inside flexbox along cross axis?

I'm trying to get an item in a flexbox layout to fill all available space inside the container if it can, or be centered if it can't due to its max-width/max-height constraints. In the snippet below, it works like I want along the main axis, but not along the cross axis. When using align-items: center, the item is centered, but has minimum size. With align-items: stretch it has maximum size, but is no longer centered. How do I make it work? I'd prefer to avoid additional html elements.

.container {  background: blue;  width: 200px;  height: 200px;  display: flex;  justify-content: center;  align-items: center;  /* align-items: stretch; */}.item {  flex: 1;  background: red;  min-width: 20px;  min-height: 20px;  max-width: 100px;  max-height: 100px;}

<div class="container"><div class="item"></div></div>