Search code examples
csscss-grid

min-width not working with CSS grid in Chrome or Edge

I want the iframe in my page to be horizontally centered. I think my code is correct, and in fact the page looks fine in Firefox, but when I open it in Chrome or Edge, the iframe does not shrink properly to fit the grid cell.

If you run this code on Chrome you will see this (undesired):

enter image description here

which is not correct since the iframe is taking that extra yellow space on the right, forcing the horizontal scrollbar to appear.

If you open this on Firefox, on the other hand, you will see that the behavior is different (desired):

enter image description here

@media only screen and (min-device-width :1300px) and (max-device-width: 1600px) {
  html,
  body {
    padding: 0px;
    margin: 0px;
    background-color: white;
  }
  .container {
    height: 100vh;
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-template-rows: 1fr;
  }
  .center-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 12fr 1fr;
    grid-template-rows: 1fr 3fr 1fr 2fr 1fr 12fr;
  }
  .right-container {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .sponsor-item-container-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 12fr 1fr;
    height: 33vh;
  }
  .sponsor-logo-item-1 {
    grid-column: 2 / 5;
    grid-row: 1 / 2;
  }
  .iframe-sponsor-1 {
    grid-column: 2 / 10;
    grid-row: 2 / 3;
  }
  .website-container-1 {
    grid-column: 2 / 10;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
  }
  .sponsor-item-container-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 12fr 1fr;
    height: 33vh;
  }
  .sponsor-logo-item-2 {
    grid-column: 2 / 5;
    grid-row: 1 / 2;
  }
  .iframe-sponsor-2 {
    grid-column: 2 / 10;
    grid-row: 2 / 3;
  }
  .website-container-2 {
    grid-column: 2 / 10;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
  }
  .sponsor-item-container-3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 12fr 1fr;
    height: 33vh;
  }
  .sponsor-logo-item-3 {
    grid-column: 2 / 5;
    grid-row: 1 / 2;
  }
  .iframe-sponsor-3 {
    grid-column: 2 / 10;
    grid-row: 2 / 3;
  }
  .website-container-3 {
    grid-column: 2 / 10;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
  }
  .right-container {
    background-color: white;
    -moz-box-shadow: -5px 0 5px -5px #333333;
    -webkit-box-shadow: -5px 0 5px -5px #333333;
    box-shadow: -25px 0 25px -25px #333333;
  }
  .iframe-sponsor-1 {
    min-width: 0px;
    min-height: 0px;
  }
  .iframe-sponsor-2 {
    min-width: 0px;
    min-height: 0px;
  }
  .iframe-sponsor-3 {
    min-width: 100px;
    min-height: 0px;
  }
  .sponsor-logo-item-1 {
    background: url('https://cdn.worldvectorlogo.com/logos/oracle-1.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sponsor-logo-item-2 {
    background: url('https://cdn.worldvectorlogo.com/logos/oracle-1.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sponsor-logo-item-3 {
    background: url('https://cdn.worldvectorlogo.com/logos/oracle-1.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
<div class="container">
  <div class="center-container">
  </div>
  <div class="right-container">
    <div class="sponsor-item-container-1">
      <div class="sponsor-logo-item-1"></div>
      <iframe class="iframe-sponsor-1" src="https://www.youtube.com/embed/VAgRVO15GTc"></iframe>
      <div class="website-container-1">
        <a href="https://www.oracle.com/index.html" target="_blank">Oracle website</a>
      </div>
    </div>
    <div class="sponsor-item-container-2">
      <div class="sponsor-logo-item-2"></div>
      <iframe class="iframe-sponsor-2" src="https://www.youtube.com/embed/VAgRVO15GTc"></iframe>
      <div class="website-container-2">
        <a href="https://www.oracle.com/index.html" target="_blank">Oracle website</a>
      </div>
    </div>
    <div class="sponsor-item-container-3">
      <div class="sponsor-logo-item-3"></div>
      <iframe class="iframe-sponsor-3" src="https://www.youtube.com/embed/VAgRVO15GTc"></iframe>
      <div class="website-container-3">
        <a href="https://www.oracle.com/index.html" target="_blank">Oracle website</a>
      </div>
    </div>
  </div>
</div>

Solution

  • This should solve your problem:

    iframe {
    max-width: 100%;
    max-height: 100%;
}

    Edit: You code shouldn't be working at all, but works in Firefox due to a bug. In Firefox v81, min-width:0; and min-height:0; will cease to work on iframes the way you're using it, and your code will break if you don't change it. You should change it to max-width:100%; instead.

    See: https://bugzilla.mozilla.org/show_bug.cgi?id=1664647