Flexbox 无法在 Chrome 中正确显示图像

Question

我有一个 flexbox 设置，如 sn-p 所示，我遇到的问题是，在 Chrome 中，一旦视口小于两个图像的宽度，整个网站就会缩小，一切都搞砸了。在 Firefox 中一切正常。我已经尝试了我能想到的一切，但没有任何效果。这是我网站的链接：airstarkennels.com

body {
  background: #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
}
#first-page-header {
  color: #ff00ee;
  text-align: center;
}
#parents-page-content-wrapper {
  margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.parents-page-image-wrapper {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
}
.parents-page-images {
  max-height: 350px;
  opacity: 1;
  cursor: pointer;
  transition: 0.4s;
}
.parents-page-images:hover {
  opacity: 0.8;
}

<main>
  <div id="parents-page-content-wrapper">
    <h1 id="first-page-header">Parents</h1>
    <div id="parents-page-mommy-info-wrapper">
      <div class="parents-page-image-wrapper">
        <img id="parents-page-mommys-pedigree" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
        <img id="parents-page-mommy-image" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy.jpg">
      </div>
    </div>
  </div>
</main>

Answer 1

这基本上是因为内容溢出在 X 轴上的 chrome 上滚动。您可以将 CSS Grid 用于您的图像容器。
使用display: inline-grid 制作您的网格容器，由于图像可以有不同的宽度，我们将使用grid-template-columns: auto auto 作为列。
所以总的来说是这样的：

body {
    background: #000000
        url('https://www.airstarkennels.com/images/main-background.jpg') left
        bottom/cover no-repeat fixed;
}

#first-page-header {
    color: #ff00ee;
    text-align: center;
}

#parents-page-content-wrapper {
    margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
    display: flex;
    justify-content: center;
}
.parents-page-image-wrapper {
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-items: space-between;
}

.parents-page-images {
    max-width: 100%;
    max-height: 350px;
    opacity: 1;
    cursor: pointer;
    transition: 0.4s;
}

.parents-page-images:hover {
    opacity: 0.8;
}

<main>
    <div id="parents-page-content-wrapper">
        <h1 id="first-page-header">Parents</h1>
        <div id="parents-page-mommy-info-wrapper">
            <div class="parents-page-image-wrapper">
                <img id="parents-page-mommys-pedigree" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
                <img id="parents-page-mommy-image" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy.jpg">
            </div>
        </div>
    </div>
</main>