In a flexbox layout, is there a `flex-shrink: 0` declaration for the cross axis?

Question

I want to prevent elements in a flex container from shrinking in the dimension that is not the flex-direction. The following example has <article> elements side by side in a row. When the available vertical space is reduced, these elements do not force their flex container to display a scrollbar; instead the content overflows the element boundary.

Screenshot 1 - there is enough horizontal and vertical space to display everything:

Screenshot 2 - the reduced vertical space pushes the element border up:

Screenshot 3 - vertical space further reduced, container finally gets a scrollbar:

Screenshot 4 - without flex-shrink:0, the element widths (main flex axis) will also be reduced:

flex-shrink:0 can prevent horizontal shrinking, but how can I prevent the elements from shrinking vertically?

Giving the <article> elements overflow: auto or something similar does not give the desired result (= scrollbar on the container). Ideally, the display would look like this montage:

If I knew the elements' height in advance, I could give them a min-height, but that is not always the case.

FIDDLE: http://jsfiddle.net/twdan8u8/

HTML:

<main>
    <article>article<br>article<br>article</article>
    <article>article<br>article<br>article</article>
</main>

CSS:

* {
    box-sizing: border-box; /* not the culprit */
}
html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    margin: 0;
    background: #999;
}
main {
    overflow: auto;
    background: gold;
    display: flex;
    height: 80%;
    padding: 50px 30px;
}
article {
    flex-shrink: 0;
    font-size: 28px;
    border: 2px solid red;
    margin-right: 30px;
    padding: 10px;
}

Answer 1

As is so often the case, I found the (or rather a) solution just when I finished writing the question. Since this might help somebody else, here's what I found out:

If the flex container is given the style align-items: flex-start, element heights are not reduced and the container gets a scrollbar when necessary (assuming a suitable overflow value).

The default for this property is "stretch". It can also be set on individual flex elements using align-self. The drawback is that the elements are now no longer equally high (i.e., they don't stretch to the full available height anymore).