Issue metadata
Sign in to add a comment
|
Inline-flex container with direction: column and wrap enabled...
Reported by
galaxyne...@gmail.com,
Jul 25 2016
|
||||||||||||||||||||||||
Issue descriptionChrome Version : 52.0.2743.82 (Official Build) m (32-bit) URLs (if applicable) : http://the-echoplex.net/flexyboxes/ Other browsers tested: Edge: FAIL Firefox (47.0.1): FAIL * All in the same way * * I guess this issue is related to Issue 507397, however not much has been done on that, unless I'm doing something wrong! What steps will reproduce the problem? (1) Make an inline-flex container with direction 'column' and enable 'wrap'... (2) Style a square div or something and add enough of them to the container so they wrap to a new column... (3) Watch how the inline-flex container doesn't increase its width when new columns are 'created'... What is the expected result? - When the child items of the inline-flex container wraps to a new column, I at least expected the containers width to increase... What happens instead? - Even with child items wrapped to multiple columns, the container always keeps its width equal to one column! * I know flex is advanced in many ways, but what I don't understand is why Chrome can't update the containers width when all items are rendered and calculated. If you look in the inspected elements, you can clearly see a visual box with size info (and position info) for all child elements, but the container still has the wrong width... This is annoying as, if it worked, it would be a pretty powerful tool! The biggest issue is when stacking multiple inline-flex containers side by side (to form some sort of gallery), just to see most of the wrapped elements overlap, as the container only thinks it's one column wide! Please provide any additional information below. Attach a screenshot if possible.
,
Jul 26 2016
,
Jul 26 2016
,
Jul 27 2016
Yes, it is the same as bug 507397. Why did you file a new bug? To answer your question, a principle of Blink's (and some other browsers') layout engine is that the width of an element is calculated *first*, before we know its height or its childrens' heights. In this case, we would need to know the height of the children in order to know that we need a second column. This behavior in Blink/Chrome will not change anytime soon.
,
Jul 27 2016
Thanks! And your answer describes exactly why I filed a new bug... I didn't get the needed information from the other bug, to be sure the issue was the same! While flex still have lots of potential, issues like this makes inline-flex with column wrap quite useless in many ways... They can't be stacked side by side, how will I know the total width for scrolling etc... But thanks for the answer. I appreciate you didn't just merge... |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by b...@chromium.org
, Jul 26 2016