Flexbox problem in Chrome

Frontend Web Development: The Big Nerd Ranch Guide Chapter 4: Responsive Layouts with Flexbox
1

Edit: I see the other thread with the same problem.
Hi, I’m in chapter 04, pag 84 and I added this snippet to my code:

    .detail-image-container {
       flex: 1 1 auto;
       display: flex;
       justify-content: center;
       align-items: center;
    }

and the result in Chrome is as shown in this image:

.detail-image is occupying space from the other flex elements.So I download the code and tried again and this happen in Chrome (750 x 575):

chrome_error_2_otter_ch_04.png767×649 402 KB

I tried in Firefox (750 x 575):

I think there is a bug in Chrome that doesn’t render correctly flexbox…
Chrome and Firefox are up to date:

  • Chrome: 55.0.2883.87
  • Firefox: 50.1.0

Is there any way to solve this? anyone know what is happening?

2 Likes
2

Hmm, well i never faced this issue, i mean my code works fine both in chrome and firefox…Check in flexbox android app