On: Bootstrap 4 Alpha 6 Released

[franciscop]

> 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.

[mdo → franciscop]

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/.

[mahdim2 → franciscop]

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.

[hidamon → franciscop]

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

[citeguised → hidamon]

Remove 100% height, add "display:flex" to "containingBlock" and "content"