【CSS】flexを使ってdt ddを横並びにする際、％指定で割り振るが段落ちしてしまう原因が知りたいです。

HTML/CSSを使って、サイト制作のコーディング練習をしています。
NEWSセクションをdl,dt,ddで組んで、flexで横並びにするという部分で、
dt,ddに対してそれぞれ２０％、８０％と横幅１００％になるように割り振って指定しても
段落ちしてしまいます。

検索しても何が原因なのかわからず、
結果的には、他の手段で横並びにましたが、
１００％になるように指定するやり方で段落ちしてしまう原因を解決しておきたく、
こちらにご質問をさせていただきました。

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

 <section id="news" class="wrapper">
        <h2 class="sectionTitle">News</h2>
        <dl>
          <dt>2021.06.XX</dt>
          <dd>テキストテキストテキストテキストに掲載していただきました。</dd>
          <dt>2021.06.XX</dt>
          <dd>テキストテキストテキストテキストに掲載していただきました。</dd>
          <dt>2021.05.XX</dt>
          <dd>テキストテキストテキストテキストに掲載していただきました。</dd>
          <dt>2021.04.XX</dt>
          <dd>テキストテキストテキストテキストに掲載していただきました。</dd>
          <dt>2021.03.XX</dt>
          <dd>テキストテキストテキストテキストに掲載していただきました。</dd>
        </dl>
      </section>

.wrapper {
  max-width: 850px;
  width: 100%;
  height: 100%;
  margin: 0 auto 140px;
  padding: 0 4%;
}

#news dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#news dt:first-of-type{
  border-top: solid 1px #c8c8c8;
}

#news dt{
  width: 20%;
  padding: 15px;
  border-bottom: solid 1px #c8c8c8;
}

#news dd{
  width: 80%;
  padding: 15px;
  border-bottom: solid 1px #c8c8c8;

}

試したこと

dlにwidthを１００％じゃなく、px指定で入れてみましたが変わらなかったです。
box-sizing: border-box; かと思いましたが、それもうまくいかなかったです。

％の割り振りが、２０％と７２％で横並びになり、７３％で段落ちします。
その指定もなんだか気持ちが悪いと感じ、
結果的に下記の方法（dtをflex:1;にし、ddを％指定）で横並びしました。
こういうやりかたでもありなのかもよくわからず、、

原因がわかる方、ご回答のほどよろしくお願い致します。

#news dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#news dt:first-of-type,dd:first-of-type{
  border-top: solid 1px #c8c8c8;
}

#news dt{
  flex: 1;
  padding: 15px;
  border-bottom: solid 1px #c8c8c8;
}

#news dd{
  width: 75%;
  padding: 15px;
  border-bottom: solid 1px #c8c8c8;
}

使用ツール：VSコード

行動規範の内容に同意します

回答1件

ベストアンサー

パディングをつけていることや、デフォルトCSSでマージンがついている影響では。

例えば、 width: 25%; で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。

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

dd {
display: block;
margin-left: 40px;
}

各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge | コリス

投稿2021/06/19 06:32

Lhankor_Mhy

総合スコア36865

kimamapony

2021/06/19 08:04

ご回答くださりありがとうございます！いただいた情報でもう一度見直し、box-sizing:border-box;を指定することで解決しました！最初に試したbox-sizing:border-box;がうまく効いてなかったのかもしれません。それでつまづいた可能性があります。こちらに質問することで解決できて良かったです。ありがとうございました！