Question

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: Flexbox display in Chrome 48

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/

Answer 1

确实，Chrome 48中存在一个令人讨厌的错误，其中flexbox被破坏，这里提到：

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

我建议的CSS修复方法是：

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

Incorrect flexbox display in Chrome 48

1 个答案: