Hacker News new | ask | show | jobs
by franciscop 3456 days 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/ , 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/

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.
3 comments
mdo 3456 days ago
You'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/.
link
mahdim2 3456 days ago
Not true, see here: 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.
link
hidamon 3456 days ago
Off 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 (test: 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
link
citeguised 3456 days ago
Remove 100% height, add "display:flex" to "containingBlock" and "content"
link