KPC
Kevin Powell - Community•5d ago
sudoku.coach

flex behaving differently in Firefox / Chrome

Hi there! Firefox seems to be calculating the required horizontal space for elements inside a flex with flex-direction: column and flex-wrap: wrap wrong. The image is what I'm trying to do (and it works well in Chrome). Basically, what I want to do is have a narrow side bar on the right (beside a number pad) where the side bar's items grow from top to bottom and then left to right. Not enough vertical space => wrap to the next column. The issue (in Firefox) is getting the bar as narrow as possible. I've made the side bar flex: 1 0 auto and the number pad flex: 1000 0 auto, so that the number pad takes as much space as possible, while the side bar grows just as much as it needs. But Firefox doesn't realize that there are multiple columns when calculating the minimum required size (min-width: fit-content and min-width: max-content yield the exact same wrong width). I'm probably not allowed to post a link to the actual website, so I've made this: https://jsfiddle.net/y3edck71/2/ (Please see how it behaves very differently in Firefox compared to Chrome) Anyone got an idea how I can make it, so the side bar is as narrow as possible but also as wide as necessary (while keeping the flow as is)?
Display colored icons in a grid layout - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
No description
2 Replies
Chris Bolson
Chris Bolson•5d ago
Rather than using flex on the side column you could try columns, eg. columns:4; Alternatively there is a "hack" which should get this working on Firefox (this is a known issue), You basically rotate the parent container using writing-mode then re-rotate the children. 
.iconWrapper{
  display: flex;
  /*flex-direction: column;*/
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  height: 100px;
  border: 3px solid black;
  flex: 1 0 auto;
}
.icon{
  writing-mode: horizontal-tb;
  width: 40px;
  height: 40px;
}
.iconWrapper{
  display: flex;
  /*flex-direction: column;*/
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  height: 100px;
  border: 3px solid black;
  flex: 1 0 auto;
}
.icon{
  writing-mode: horizontal-tb;
  width: 40px;
  height: 40px;
}
sudoku.coach
sudoku.coachOP•5d ago
Thank you so much for your help! I wouldn't have expected it to be a known issue because I didn't find anything. The second approach works very well. (Couldn't test in safari yet so fingers crossed.) I never would have thought of changing writing-modes to work around this Firefox issue, so thanks a lot!

Did you find this page helpful?