Question 413659 in Html Question posted in
Some basic documentation can be found here.

Html – Why is flexbox behaving differently in chrome vs firefox?

I have a div with two elements, an image and text inside a flexbox. I try to maintain the ratio between the two using flex: 1 and flex: 2. (one third for the image, two this for the text).

It looks like this:

    .body {
      display: flex;
      flex-direction: row;
    }
    
    .thumbnail {
      flex: 1;
      width: 100%;
    }
    
    .description {
      flex-direction: column;
      flex: 2;
    }
    .description p {
      margin: 0;
    }
    
    .actual-output {
      padding: 10px;
    }
<div class="actual-output">
    <div class="body">
      <img class="thumbnail" src="https://place-hold.it/300x500" />
      <div class="description">
        <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
      </div>
    </div>
</div>

In firefox, when I resize it, it continues to maintain the 1:2 ratio:

enter image description here
enter image description here

In Chrome, this does not happen:

enter image description here
enter image description here

Is there a mistake in my CSS? Why is there a different in browser behavior?

Tags:

2

Answers


  1. 0

    If you set the image’s min-width to 0 it’s prevented from stretching.

    I also removed the width: 100% from the .thumbnail class and the flex-direction from the .description div to stop that from interfering

    .body {
  display: flex;
  flex-direction: row;
}

.thumbnail {
  flex: 1;
  min-width: 0; /* Allows the image to shrink in flex layout */
}

.description {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.description p {
  margin: 0;
}

.actual-output {
  padding: 10px;
}
    <div class="actual-output">
  <div class="body">
    <img class="thumbnail" src="https://place-hold.it/300x500" alt="placeholder image" />
    <div class="description">
      <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The other answer gave you a solution to get the behavior you’re expecting, but to answer specifically why it’s different when comparing the same CSS between Chrome and Firefox:

    It appears to relate to the fact that in Chrome, <img> tags have overflow: clip; by default. Changing this to overflow:hidden or overflow:auto (depending on your use case I suppose) results in the expected behavior.

    Since Chrome 108, the default browser style sheet clips the overflow to the content box with the following rules:

    img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

    .body {
    display: flex;
    flex-direction: row;
}

.thumbnail {
    flex: 1;
    width: 100%;
    overflow: auto /* the added change */
}

.description {
    flex-direction: column;
    flex: 2;
}

.description p {
    margin: 0;
}

.actual-output {
    padding: 10px;
}
    <div class="actual-output">
    <div class="body">
        <img class="thumbnail" src="https://place-hold.it/300x500" />
        <div class="description">
            <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
                visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used
                as a placeholder before final copy is available.</p>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search