Chrome 48中的flexbox显示不正确 [英] Incorrect flexbox display in Chrome 48

问题描述

我在Chrome的Flexbox的某些功能上遇到了问题.我想用图片和描述做块，所以我决定使用flexboxex. 我有flexbox父级，其中有两个子div.第一个孩子占30％的宽度，而后一个孩子占70％的宽度.问题在于Chrome 48无法保持图像比例，而无法扩展其高度.看起来如何

I'm having a problem with some functionality of flexboxes in Chrome. I wanted to make block with Picture and Description in it, so I decided to use flexboxex. I have flexbox parent, which has two child divs in it. First child take 30% of width, and latter is 70%. The problem is that Chrome 48 doesn't keep the image ratio and stretches its height. How it looks like

Chrome 48: Chrome 48中的Flexbox显示屏

Chrome 48: Flexbox display in Chrome 48

但是在Chrome 39和Mozilla中一切正常.如何解决此问题，或者我在代码中犯了一些错误，导致它在实际的Chrome版本中无法正确显示? 谢谢！

But everything is OK in Chrome 39 and Mozilla. How can I workaround this problem, or did I make some mistakes in code, that it displays incorrectly in actual Chrome version? Thanks!

以下是该示例的小提琴代码

Here is Fiddle code to the example

    .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/

推荐答案

实际上，Chrome 48中有一个烦人的bug，其中的flexbox损坏了，在这里提到:

Indeed, there is an annoying bug in Chrome 48 where flexbox is broken, mentioned here:

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

我为您的CSS建议的修复方法是:

My suggested fix for your CSS is:

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

这篇关于Chrome 48中的flexbox显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！