Menu
The chart below works on Chrome and Firefox, but Safari is shrinking the width of the boxes. This is also happening on mobile clients. I'm including the css for the chart container and a codepen to the complete markup and css.
https://codepen.io/juancho1/pen/akyNmp
#chart-container{
width: 100%;
height: auto;
border: 1px solid #39c3ec;
/*display: -webkit-box;*/
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll !important;
}
I'm hoping someone has come across this specific issue before. While looking for a possible solution I saw that Safari has some issues with flexbox, and tried most of the solutions I've seen. It may be also related to the flex direction.
I'd appreciate any tips anyone may have! Thanks
230
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari.
The flexbox properties are supported in all modern browsers.
default flex-shrink: 1; If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content. flex-shrink: 0; The element will not shrink: it will retain the width it needs, and not wrap its content.
A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items. Note that these properties are to be set on the flex container, not on the items themselves.
Update
As much as I love the upvotes I've been getting randomly, I've realized I made a pretty big mistake in my original post. The default flex value is 0 1 auto not 1 0 auto. However, this only adds to the reasoning behind why setting flex-shrink to 0 would keep flex items from shrinking, it just doesn't explain why they weren't shrinking in all browsers.
Original Post
I've ran into this issue before. On most other browsers, flex is automatically set to 1 0 auto, which is short for saying flex-grow: 1; flex-shrink: 0; flex-basis: auto;. flex-shrink: 0; should prevent the boxes from shrinking, but it seems safari does not automatically set this property. Simply set flex-shrink to 0 on your flex items and they will not shrink anymore.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
