flexで横並びにしたdt・ddに余白を設定したい

Question

前提・実現したいこと

dl・dt・ddを使って、webページの「新着情報」リストを作っています。

flexで横並びにしたdtとddにpaddingを使って見た目を整えたいと思っています。
具体的には、dtとdd間の余白とdlの上下の余白を設定したいです。

該当のソースコード

<div class="main_dl">
	<h2 class="main_dl_header">新着情報</h2>
	<dl class="main_dl_list">
		<dt>20xx年xx月xx日</dt>
		<dd>【xxxxxのお知らせ】〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</dd>
		<dt>20xx年xx月xx日</dt>
		<dd>【xxxxxお知らせ】〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</dd>
		<dt>20xx年xx月xx日</dt>
		<dd>【xxxxxxxxのご案内】〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</dd>
		<dt>20xx年xx月xx日</dt>
		<dd>【xxxxxxお知らせ】〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</dd>
		<dt>20xx年xx月xx日</dt>
		<dd>ホームページをリニューアルしました。</dd>
	</dl>
</div>

該当のソースコード

.main_dl_list{
	display: flex;
	flex-wrap: wrap;
}

.main_dl_list dt{
	flex-basis: 20%;
	border-bottom:1px dotted gray ;
}

.main_dl_list dd{
	flex-basis: 80%;
	margin-left: auto;
}

試したこと

dtとddでwidthを合計100％にしてpaddingを設定すると、横段がずれました。
widthではなくflex-basisで合計100％にしてpaddingを設定している例もあったのですが、
結果は同じでした。
そもそも、".main_dl_list dd"のmargin-left:autoにしないと横並びにならなかったので、これを設定しています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

box-sizing: border-box; を設定するといいでしょう。
ボックスのサイズを計算するときに余白(Padding)や境界線を含めるか、含めないかを指定します。
初期値はcontent-boxなのでPadding分余分に幅をとりますので、改行されてしまいます。

.main_dl_list > * {
  box-sizing: border-box;
  padding: 10px;
}

widthではなくflex-basisで合計100％にしてpaddingを設定している例もあったのですが、

おそらく* {box-sizing: border-box;}としてたか、リセットCSSを適用していたのでしょう。

Comments

[wata--ru]

hatena19様
回答ありがとうございました。解決しました！