css - Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox -


i have containing row contains 3 divs. each child div either has background image, or text. image divs using background-image , have no defined width/height, have aspect ratio set using aspect ratio padding method (using pseudo-elements in instance).

this seems work in firefox, in chrome containing div doesn't seem respect height of tallest div, so:

enter image description here

for reference, i'm using flexbox flex-direction set column that, given max-height on containing div, elements should wrap. having been poking , prodding few hours, can't determine whether culprit issue flexbox, or issue padding-bottom aspect ratio method (although suspect not, given right-hand set of columns seems work fine).

any ideas why breaks out of container in chrome/webkit?

for reference, here's jsfiddle kittens.

it's chrome bug. see simplified snippet:

.flex {    display: flex;    flex-flow: column wrap;    max-height: 200px;    background: red;    justify-content: space-between;    margin: 10px 0;  }  .big, .small {    background: blue;    margin: 10px;  }  .big {    height: 75px;  }  .small {    height: 50px;  }
<div class="flex">    <div class="small"></div>    <div class="small"></div>    <div class="big"></div>    <div class="big"></div>  </div>  <div class="flex">    <div class="big"></div>    <div class="big"></div>    <div class="small"></div>    <div class="small"></div>  </div>

with max-height on flex container, flex items forced wrap 2 columns.

on chrome, each column has different height, , height of flex container height of last column.

this contradicts spec, because flex lines (columns, in case) must have same main size (height, in case):

6. flex lines
main size of line same main size of flex container’s content box.

this bug due first main size of flex container determined, , flex items arranged flex lines

9. flex layout algorithm

  1. determine main size of flex container using rules of formatting context in participates.
  2. collect flex items flex lines

however, according block layout, auto height depends on content. determining before arranging content seems not defined.

to fix it, suggest using wrapping each column inside flex item of row flex container.

.flex {    display: flex;    flex-direction: row;    background: red;    margin: 10px 0;  }  .col {    flex: 1;    display: flex;    flex-flow: column wrap;    justify-content: space-between;  }  .big, .small {    background: blue;    margin: 10px;  }  .big {    height: 75px;  }  .small {    height: 50px;  }
<div class="flex">    <div class="col">      <div class="small"></div>      <div class="small"></div>    </div>    <div class="col">      <div class="big"></div>      <div class="big"></div>    </div>  </div>  <div class="flex">    <div class="col">      <div class="big"></div>      <div class="big"></div>    </div>    <div class="col">      <div class="small"></div>      <div class="small"></div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more