Image behavior within flexbox (rows embedded in columns)

Question

The below fiddle has three blocks.

block 1 contains three columns. The middle column has two rows within it, each set to flex:1.

bl

Answer 1

Here is one solution using relative/absolute positioning. Not sure if it's "kosher" as some MXMJ types would say, but it works. See added code at the bottom of CSS.

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

/* Added Code */
.middle .row {
    position: relative;
}

.middle .row img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 95%;
    max-height: 95%;
}