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

Question

我在使用 Chrome 中的 flexboxes 的某些功能时遇到问题。我想制作带有图片和描述的 block ，所以我决定使用 flexboxex。我有 flexbox parent，其中有两个子 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;
}