防止网格在 flexbox 中溢出

Question

我不确定为什么图像占用这么多 space 并导致溢出。如果将 imgs 替换为文本，它看起来很好。

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;

}

.item {
  display: inline-block;
  text-align: center;
}

img {
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 1

您可以使用图片作为背景，这样会更容易控制和避免溢出。也不要忘记高度计算中的边框，因此您可以添加 box-sizing:border-box :

for (let i = 0; i < 15; i++) {
  $("#grid").append(`
    <div class="item" style="background-image:url(http://via.placeholder.com/150x350)">
     
    </div>
  `);
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.footer {
  height: 20%;
}

.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing:border-box;
}

.item {
  display: inline-block;
  text-align: center;
  background-size: auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 2

这里的问题是：

height: 100% on #grid 与 border: 1px 结合使用 box-sizing: border-box
经典内联白色space在item和image

修复：

在 #grid 上添加 box-sizing: border-box（或使用计算器，height: calc(100% - 2px)）
删除 item 上的 inline-block 并在 img

display: block

为了图像的居中，作为一个块，我还添加了 margin: 0 auto 并删除了 text-align: center，因为它已经没有效果了。

堆栈片段

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;                  /*  added  */
}

.item {
  /*display: inline-block;                     removed  */
  /*text-align: center;                        removed  */

  min-height: 0;                           /*  Firefox fix  */
}

img {
  display: block;                          /*  added  */
  margin: 0 auto;                          /*  added  */
  max-height: 100%;
  max-width: 100%;           /*  might want this too  */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 3

这是一种缩小包含具有固有尺寸的元素（例如图像）的网格项目的方法 - 同时保持纵横比

img { object-fit: contain; }

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
}

.item {
  display: inline-block;
  text-align: center;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

防止网格在 flexbox 中溢出

prevent grid from overflowing inside flexbox

html

css

flexbox

css-grid