带覆盖列的两列布局-flexbox在这里可用，还是我需要解决显示问题：内联块？

Question

I am building a two-column layout and I only need to support modern browsers. The two columns should fill 100% of the width of their container. Additionally, I have a third column which needs to be the same width as the left-side column and lay ontop of it.

If I did not have the need for an overlaying column then this problem would be easily solved with the use of flexbox. However, I'm not sure it is possible to tell the overlay column that it should be the same width as the flexible column underneath it. So, I am using percent-width columns which are display: inline-block and apply font-size: 0 to the parent element to prevent additional spacing between the columns.

My questions are:

• Is it possible to use flexible columns to achieve this effect?
• If not, is there a more appropriate way to achieve this effect? I hate working around the implicit spacing of display: inline-block with font-size: 0

Is there a more appropriate way to achieve my effect in modern browsers?

Here's my JSFiddle

<div class='page'>
    <div class='left column'>
    </div>
    <div class='left column overlay'>
    </div>
    <div class='right column'>
    </div>
</div>

.page {
    width: 400px;
    height: 400px;
    font-size: 0;
    position: relative;
}

.column {
    height: 100%;
    display: inline-block;
}

.left {
    width: 60%;
    background-color: green;
}

.right {
    width: 40%;   
    background-color: blue;
}

.overlay {
    display: none;
    background-color: yellow;
    position: absolute;
    left: 0;
}

Answer 1

Something like this? http://jsfiddle.net/bluedao/su28zxea/

Code from fiddle

<div class="row-outer">
    <div class="row-inner">
        <div class="col col1">
            <div class="overlay">
                <span>Overlay</span>
            </div>
            <div>some text</div>
            <div>some more text</div>
        </div>
        <div class="col col2">
            <div>Content</div>
        </div>
    </div>
</div>

.row-outer {
    position: absolute;
    background: gray;
    width: 100%;
}

.row-inner {
    background: purple;
    position: relative;
}

.col {
    float: left;
}

.col1 {
    background: red;
    width: 40%;
}

.col2 {
    background: blue;
    width: 60%;

}

.overlay {
    position: absolute;
    background: green;
    width: 40%;
}