kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Updated Safari Bug (#24350)

Browse source
This commit is contained in:
Michael Letcher 2017-10-12 19:22:18 +01:00 committed by XhmikosR
parent ce1a72b2f0
commit c8ee8509cb
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/4.0/layout/grid.md
View file

@ -149,9 +149,9 @@ For example, here are two grid layouts that apply to every device and viewport,
{% endexample %} {% endexample %}
</div> </div>
Equal-width columns can be broken into multiple lines, but there is a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevents this from working without an explicit `flex-basis` or `border`. Our example works thanks to the `border` being set; you can do the same with `.col { border: 1px solid transparent; }`. Alternatively, you can set the flex-basis to the width of the column (e.g., `.col { flex: 1 0 50%; }`). Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevented this from working without an explicit `flex-basis` or `border`.
Both these fixes have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor). Two workarounds have been documented in a [reduced test case outside Bootstrap](https://output.jsbin.com/micohor), though if the browser is up to date this shouldn't be necessary.
<div class="bd-example-row"> <div class="bd-example-row">
{% example html %} {% example html %}