Flexbox 在 Chrome 中無法正確顯示圖像

Question

我有一個 flexbox 設置，如片段所示，我遇到的問題是，在 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>