firefoxでcssがはみでる

Question

前提・実現したいこと

2カラムのCSSがありそこで画像と解説があり、オペラとクロームは線の中に納まっていますが、firefoxでもcssがはみ出ないようにしたいです

なぜはみでるのかも教えてください

発生している問題・エラーメッセージ

firefoxでcssがはみ出る
コードはこちらです↓

    <div class="comfirm_box">
                <div class="comfirm">
                  <h2>最終確認</h2>
        </div>
        <ul class="yesno">
          <li class="yes">
              <img src="https://www.pakutaso.com/shared/img/thumb/KAZUKIhgfdrfgh_TP_V.jpg" alt="">
              <h2>入場</h2>
              <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            </li>
            <li class="yes">
                <img src="https://www.pakutaso.com/shared/img/thumb/KAZUKIhgfdrfgh_TP_V.jpg" alt="">
          <h2>退場</h2>
          <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

          </p>
        </li>
    </ul>
</div>

* {
   box-sizing: border-box;
 margin: 0%;
  padding: 0%;
}

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

li {
  list-style: none;
}

.comfirm_box {
  display: flex;
  flex-direction:column;
  align-items: stretch;
}

.comfirm {
  text-align: center;
  padding: 15px;
  color: #111;
  background: whitesmoke;

}

.yesno {
grid-template-columns: 1fr 1fr;
  margin: 50px;
  display: grid;
  
  grid-gap: 50px;
}

.yes {
  color: #000000;
  padding: 15px;
  background-color: #fff;
  border:1px solid #111;
}

‘‘‘

Comments

[Lhankor_Mhy]

途中で質問登録してしまったのでしょうか。

これで全部なら、とりあえずCSSをご提示ください。

Answer 1

パーセント値は、当該要素の包含ブロックに対して計算されます (参考)。恐らく、このグリッド項目内の img 要素において、パーセント値は auto として振舞わず、包含ブロックの大きさは再解決されません (参考)。また CSS Grid Layout Module Level 1 によれば、グリッド領域の各グリッド項目に対する包含ブロックはグリッド領域です (参考)。よって、パーセント値を考慮せずにグリッド領域の高さが決まり、それに基づいてパーセント値によるサイズが決定する、 Firefox が行っているような動作が正しいと考えられます。

以上を踏まえ、 Firefox の挙動が正しいという前提で回答をします。この問題を解決するためには、以下のような方法があります:

• 他の回答にあるように height, object-fit プロパティを削除する
• 各要素に適切な高さを設定する

今回は実現したい挙動が質問文に書かれていないため具体的な回答は出来ませんが、 Google Chrome や Opera と同じ動作を実現したいのであれば、 img 要素の height, object-fit プロパティを削除することが簡単な問題の解決方法だと思います (動作確認用リンク)。

<div class="comfirm_box">
  <div class="comfirm">
    <h2>最終確認</h2>
  </div>
  <ul class="yesno">
    <li class="yes">
      <img src="https://www.pakutaso.com/shared/img/thumb/KAZUKIhgfdrfgh_TP_V.jpg" alt="">
      <h2>入場</h2>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </li>
    <li class="yes">
      <img src="https://www.pakutaso.com/shared/img/thumb/KAZUKIhgfdrfgh_TP_V.jpg" alt="">
      <h2>退場</h2>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

      </p>
    </li>
  </ul>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  width: 100%;
}

.comfirm_box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.comfirm {
  text-align: center;
  padding: 15px;
  color: #111;
  background: whitesmoke;
}

.yesno {
  grid-template-columns: 1fr 1fr;
  margin: 50px;
  display: grid;
  grid-gap: 50px;
}

.yes {
  color: #000000;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #111;
}

Answer 2

↓これでいいんじゃないかと思います。

img {
object-fit: contain;
width: 100%;
/* height: 100%; 削除 */
} 

　
はみ出る理由ですが、height:100%とは「親要素と同じ高さ」という意味です。

<percentage>

包含ブロックの高さのパーセントで高さを定義します。

値 | height - CSS: カスケーディングスタイルシート | MDN

なので、imgだけで親要素を占めてしまいますから、そのほかの要素は当然にはみ出ることになります。Operaのレンダリングが異なる理由については、手元に環境がないので、ちょっとわかりません。

Answer 3

cssが記載いただいていないので想像でしかご回答することができませんが、
reset.cssなどを使用してブラウザ間の差分をなくすよう設定いただいていますか？

ブラウザ間差分をなくすよう処理していないと、Chromeでは綺麗に表示されているけどFirefoxでははみ出るなんてことがあったりします。