Cross-Axis Length Ignores Margins - css

Question

One really cool thing about flexbox is that, if there is room, the flex items' margins are included in the width of the flex container, even if I tell it to take up the whole space. For example, if I have an 100px-wide flex container, and give it a single child that takes up its whole width, then give that child 10px margins on both sides, the child actually becomes 80px wide, as the container allows the child to be completely encapsulated, including the margins. This ignores concerns about overflow, which can be worked around quite easily (min-width: 0; usually handles this).
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: dodgerblue;
}
flex-item {
display: block;
background-color: darkgray;
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
However, this trick does not seem to extend to the cross-axis (height normally, width with flex-direction: column). If I now give my flex item 10px margins on the top and bottom, instead of the left & right, and give it the whole height instead of the whole width like before, it starts to extend past the bottom edge of the container. Why is that?
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: dodgerblue;
}
flex-item {
display: block;
background-color: darkgray;
margin-top: 10px;
margin-bottom: 10px;
height: 100%;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
I have seen this behavior on Google Chrome as well as Firefox. It is probably also he case on Internet Explorer/Edge, but I have not had the ability to test.
Why does the flex item stay inside margins on the main axis, but not on the cross axis?

Answer 1

The reason is that in the direction flex is set, and since flex-grow's default is 0, it is not allowed to grow, but it is allowed to shrink, (flex-shrink default is 1), so it does.
Here is the same test using column direction, where you will get the reverse behavior.
Your first sample, but with column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Your second sample, but with column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-top: 10px;
margin-bottom: 10px;
height: 100%;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Updated based on a comment.
If you want a similar behavior, where the flex item shrinks and doesn't overflow its parent, simply remove the given width/height
Sample for row direction
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: green;
}
flex-item {
display: block;
background-color: orange;
margin-top: 10px;
margin-bottom: 10px;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Sample for column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: green;
}
flex-item {
display: block;
background-color: orange;
margin-left: 10px;
margin-right: 10px;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>

Answer 2

An initial setting of a flex container is flex-shrink: 1.
This means that flex items will shrink when necessary to avoid overflowing the container.
The flex-shrink property (along with flex-grow, flex-basis and flex) works only on the main axis. That's why you see a difference in your width vs. height examples.
When you add top and bottom margins to a flex item in a row-direction container, the flex-shrink: 1 feature does not apply (because you're now in the cross axis), so the item will not shrink to accommodate the added margins.
If you disable flex-shrink, your flex item with horizontal margins will overflow the container:
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: red;
}
flex-item {
flex-shrink: 0; /* new */
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
background-color: green;
}
<flex-container>
<flex-item></flex-item>
</flex-container>

Answer 3

It will respect the margins when you define the flexbox as a column and remove the width: 100% for the child.
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-left: 10px;
margin-right: 10px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>