Css, Html: Why is chrome ignoring the container width? (Working fine on all other browsers)

Question

In the footer of my webpage I have this collection of imgs:

.footer_grid {
  background-color: #0062cc;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.imprint_imgs {
  padding-left: .5em;
  padding-right: .5em;
  padding-bottom: .5em;
}

.all_footer_items {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

<div class="footer_grid">
  <div class="row1_imprint">
    <a href="http://www.complayment.com/Datenschutzerklaerung.htm">
      <p>Data Privacy</p>
    </a>
    <p>Technologies and Partners</p>

  </div>
  <div class=all_footer_items>
    <img class="imprint_imgs" src=img/imprint/img_xamarin.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_android.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_apple.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_vs.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_vscode.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_unity.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_azure.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_kumulos.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_windowsa.png alt="What an epic picture">

  </div>

</div>

I colored the container in blue to show what is happening on chrome:

The result

It is clearly visible, that the images are leaving the container. However, on all other browsers, this works just fine with the imgs always staying inside of the container.

Where is my mistake?

Thank you

So, you want all of the images to show on your footer. Do you want them to auto resize or a scroll bar if images are overflowing? — JayC, Oct 20 '20 at 13:46
I want them to auto resize to the container. NO scrollbar. This already works fine in IE, firefox, safari... — 20 aid, Oct 20 '20 at 13:46
your example produces for me in chrome same output as in firefox and it is that parts of the text are outside the blue box — Jarlik Stepsto, Oct 20 '20 at 14:01
@JarlikStepsto okay, so why is this happening? it is clearly said to take its width of its container right? — 20 aid, Oct 20 '20 at 14:07
add `min-width: 0; flex-shrink: 1;` to your items and try, if it helps — Jarlik Stepsto, Oct 20 '20 at 14:16
@20aid Check your answer here. This will help you https://stackoverflow.com/questions/19896626/how-to-get-multiple-images-to-auto-resize-and-stay-centered-within-a-div/19896814 — JayC, Oct 20 '20 at 14:19
Try to change the zoom of others browsers then check if the images still inside containers . — Fawzi Chilouh, Oct 20 '20 at 13:54

Jarlik Stepsto · Accepted Answer · 2020-10-20T14:18:11.850

Try to add a flex-shrink: 1; to your images, that should allow them to shrink and fit the width and add min-width:0;. With flex it is min-width:auto which seems not to work for you.

.footer_grid {
  background-color: #0062cc;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.imprint_imgs {
  padding-left: .5em;
  padding-right: .5em;
  padding-bottom: .5em;
  flex-shrink: 1;
  min-width: 0;
}

.all_footer_items {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

<div class="footer_grid">
  <div class="row1_imprint">
    <a href="http://www.complayment.com/Datenschutzerklaerung.htm">
      <p>Data Privacy</p>
    </a>
    <p>Technologies and Partners</p>

  </div>
  <div class=all_footer_items>
    <img class="imprint_imgs" src=img/imprint/img_xamarin.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_android.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_apple.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_vs.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_vscode.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_unity.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_azure.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_kumulos.png alt="What an epic picture">
    <img class="imprint_imgs" src=img/imprint/img_windowsa.png alt="What an epic picture">

  </div>

</div>

This does the trick. Maybe it is glitched out here for some reason. also adding a max-width property with percentages to it fixes this. thank you :) — 20 aid, Oct 20 '20 at 14:20

Css, Html: Why is chrome ignoring the container width? (Working fine on all other browsers)

1 Answers1