2

I have a problem with simple flexbox layout in Firefox. The parent div .logos-grid is not shrinking when you resize the browser window although in all other major browsers it does.

The html:

 <div class="grid">
      <div><img src="logo.png"></div>
      <div><img src="logo.png"></div>
      <div><img src="logo.png"></div>
      <div><img src="logo.png"></div>
      <div><img src="logo.png"></div>
 </div>

The css:

.grid {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.grid img {
  max-width: 100%;
}

Demo on codepen: http://codepen.io/thomasoCZ/pen/VajQzJ?editors=1100

Please help :-)

Just a student
  • 10,560
  • 2
  • 41
  • 69
thomasoCZ
  • 21
  • 2
  • is the number of images per row variable or is it always 5? (in other words: are you looking for a general-purpose solution or just for this specific scenario?) – Fabrizio Calderan Mar 11 '16 at 10:53
  • 1
    Please see the answer given to the question in my previous comment. You'll need to add `min-width: 1px` to `.grid div`. http://codepen.io/anon/pen/KzMoqr?editors=1100 – Hidden Hobbes Mar 11 '16 at 11:13
  • nice trick @HiddenHobbes , I'll remove my answer since your approach is simpler – Fabrizio Calderan Mar 11 '16 at 11:19

0 Answers0