html - Incorrect flexbox display in Chrome 48 -

-

i'm having problem functionality of flexboxes in chrome. wanted make block picture , description in it, decided use flexboxex. have flexbox parent, has 2 child divs in it. first child take 30% of width, , latter 70%. problem chrome 48 doesn't keep image ratio , stretches height. how looks like

chrome 48: flexbox display in chrome 48

but ok in chrome 39 , mozilla. how can workaround problem, or did make mistakes in code, displays incorrectly in actual chrome version? thanks!

here fiddle code 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, malesuada libero lacus eu ex. nullam              velit risus. vestibulum cursus arcu quis tellus iaculis, 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/

indeed, there annoying bug in chrome 48 flexbox broken, mentioned here:

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

my suggested fix css is:

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

Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more