网格单元内柔性项目中的图像导致水平溢出

Question

我有一个简单的网格设计，具有三行和一列。在其中的一行中，我使用flexbox水平显示3个项目。我正在使用FF和Chrome的各种窗口大小和响应模式测试所有这些。

[当所有三个flex项目均为包含文本的div时，所有内容的行为均符合预期。当我用img替换一个项目时，我会感到奇怪：我无法将窗口的宽度减小到一定阈值以下而不会引起水平溢出（出现底部滚动条）。似乎要保持一定的长宽比。

我在这里制作了一个代码笔：https://codepen.io/mavromatika/pen/rNOVLdE

尝试注释img，然后取消注释<div>works</div>，并更改窗口宽度。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.contenant-presentation {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: minmax(0, 1fr) 10fr minmax(0, 1fr);
}

.premiere-ligne {
  background-color: greenyellow;
}

.troisieme-ligne {
  background-color: greenyellow;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.troisieme-ligne div {
  /* height: 100%;*/
}

.troisieme-ligne img {
  max-height: 100%;
  width: auto;
}

<div class="contenant-presentation">
  <div class="premiere-ligne"></div>
  <div class="deuxième-ligne"></div>
  <div class="troisieme-ligne">
    <div>This</div>
    <div>works</div>
    <!--<img src="https://etc.usf.edu/clipart/65200/65255/65255_dipper_lg.gif">-->
    <div>fine</div>
  </div>

</div>

Answer 1

如果您不想要底部的滚动条，请尝试添加以下内容：

.contenant-presentation{

  overflow-x: hidden;

 }