3 ms·
> Automatic equal-width grid columns (e.g., two columns are automatically 50% wide) This is not entirely accurate and I know it as the developer of Picnic CSS
by franciscop 10y ago
> Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
This is not entirely accurate and I know it as the developer of Picnic CSS ( http://picnicss.com/ http://picnicss.com/ , which has been using flexbox for a while).
The columns will only be equal width with the same content or some smaller content, similarly to how table works. Case in point:
https://jsfiddle.net/q39rq6eu/ https://jsfiddle.net/q39rq6eu/
If the columns were equal-width, we'd see in the example that the one on the right starts in the middle of the screen.
- mdo 10y agoYou're showing an arbitrary HTML snippet here, not Bootstrap's grid system. Add the grid markup and make sure your image is responsive, and you'll get https://jsfiddle.net/q39rq6eu/6/ https://jsfiddle.net/q39rq6eu/6/.
- hidamon 10y agoOff topic from OP but do you guys have a work-around for this issue in Safari that's still present to this day? https://bugs.webkit.org/show_bug.cgi?id=137730 https://bugs.webkit.org/show_bug.cgi?id=137730 (test: https://people-mozilla.org/~dholbert/tests/flexbox/compat_tests/percent-height-grandchild-1.html https://people-mozilla.org/~dholbert/tests/flexbox/compat_te...) It's been fixed in all other browsers and it's really killing the ability to go full blown flexbox
- citeguised 10y agoRemove 100% height, add "display:flex" to "containingBlock" and "content"
- mahdim2 10y agoNot true, see here: https://jsfiddle.net/2om8t67a/3/ https://jsfiddle.net/2om8t67a/3/ Images act a bit weird in flex though, so it might be true for img elements as direct children of flex containers, but for normal content it's not.