5

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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Juan
  • 53
  • 1
  • 5

1 Answers1

18

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.

Cameron637
  • 1,699
  • 13
  • 21
  • Hi Cameron637, I tried adding those properties but it did not work. Thanks for the tip! – Juan Jul 07 '16 at 01:48
  • 4
    For me it was also initially not working. I had a `.container` that was flex, then within that a `div` with an `img` that was getting truncated on the right side (in Safari 9.1.1 but not Chrome or Firefox or Opera). Adding `flex-shrink: 0` to the styling for the `img` didn't fix it. But adding `flex-shrink: 0` to the `div` wrapping the `img` _did_ fix it. – Purplejacket Aug 31 '16 at 19:44
  • 1
    Note: See also: https://github.com/philipwalton/flexbugs – Purplejacket Aug 31 '16 at 19:46