Flexbox "align-items : center" shrinks a child's max-width - html

Question

I have a flexbox div container with align-items: center, with three childs. One of them has max-width: 200px (in the code, second-ch), and it's also a flex with two childs distributed with justify-content: space-between, but second-ch is not following its max-width. If I remove align-items: center from container, second-ch takes again the width desired but the remaining elements are not in the center anymore. How can I solve that?
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.first-ch {
width: 70px;
height: 70px;
background-color: grey;
}
.second-ch {
max-width: 200px;
height: 80px;
background-color: red;
display: flex;
justify-content: space-between;
}
.square {
width: 50px;
height: 50px;
background-color: yellow;
margin: 5px;
}
.third-ch {
width: 50px;
height: 50px;
background-color: blue;
}
<div class="container">
<div class="first-ch"></div>
<div class="second-ch">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="third-ch"></div>
</div>

Answer 1

Citing the comment of Jason Deppen:
I solved it by also setting width: 100% along with my max-width value.
max-width: <your max width>;
width: 100%;

Answer 2

Why is this happening ?
It's not really the effect of align-items: center. It's the omision of the default value, align-items: stretch , that makes the child grow.
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch; /* default */
}
.first-ch {
width: 70px;
height: 70px;
background-color: grey;
}
.second-ch {
max-width: 200px;
height: 80px;
background-color: red;
display: flex;
justify-content: space-between;
}
.square {
width: 50px;
height: 50px;
background-color: yellow;
margin: 5px;
}
.third-ch {
width: 50px;
height: 50px;
background-color: blue;
}
<div class="container">
<div class="first-ch"></div>
<div class="second-ch">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="third-ch"></div>
</div>
If you want the child to grow until it reaches the width-max, do as bolverin says and set the width explicitly

Answer 3

I know this is old but for anyone reading this:
Using align-self: stretch; on the child element will also work :)
So in this case:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
...
.second-ch {
max-width: 200px;
align-self: stretch;
...
}
...

Answer 4

why do you use max-width: 200px;? try width: 200px;
when you use align-items : center the .second-ch has minimal needed width.
max-width limits max width of the block but doesn't set minimal width