html - Chrome 48 中的 Flexbox 显示不正确

Question

我在使用 Chrome 中 Flexbox 的某些功能时遇到问题。我想制作一个带有图片和描述的 block ，所以我决定使用flexboxex。 我有 flexbox 父级，其中有两个子 div。第一个 child 占宽度的 30%，第二个 child 占宽度的 70%。问题在于 Chrome 48 不保持图像比例并拉伸(stretch)其高度。看起来怎么样

Chrome 48: Flexbox display in Chrome 48

但在 Chrome 39 和 Mozilla 中一切正常。我该如何解决这个问题，或者我在代码中犯了一些错误，导致它在实际的 Chrome 版本中显示不正确？ 谢谢!

这是示例的 Fiddle 代码

    .parent0 {
        display: flex;
        width: 100%;
    }

    .child1 {
        width: 30%;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .child2 {
        width: 70%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .image {
        width: 50%;
        display: block;
    }

<div class="parent0">
        <div class="child1">
            <img class="image" src="http://keo.kz/img/headBlack.png">
            <img class="image" src="http://keo.kz/img/headBlack.png">
        </div>
        <div class="child2">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean malesuada lacinia lacus, ut porta ipsum
            luctus sit amet. Pellentesque dapibus massa in eros ullamcorper, vel hendrerit lectus porttitor. Class
            aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus tristique,
            magna vitae venenatis cursus, urna             elit viverra dolor, a malesuada libero lacus eu ex. Nullam a
            velit risus. Vestibulum cursus arcu quis tellus iaculis, a faucibus ipsum aliquam.

            Pellentesque id magna mauris. Nunc commodo metus eu justo feugiat, in bibendum dui porta. Nullam tempor,
            felis quis sollicitudin commodo, odio mauris suscipit metus, pulvinar malesuada diam dui vel leo. Nam porta
            , elit id venenatis placerat. Donec fringilla lectus quam, nec suscipit nibh
            feugiat semper. Nunc ut tincidunt purus.
            </div>
        </div>
    </div>

http://jsfiddle.net/sr2Lkwbh/

Answer 1

确实，Chrome 48 中存在一个恼人的错误，即 Flexbox 被破坏，这里提到:

https://github.com/angular/material/issues/6841

我对 CSS 的建议修复是:

.image {
    width: 50%;
    display: block;
    min-height: 0;
    min-width: 0;
}