ホームページのレイアウト　親要素と子要素の高さについて

ホームページのレイアウトについて教えてください。

親要素jelWapperの中に子要素jelが二つ横並びになっています。

親要素の高さは子要素の高さによって自動で設定されると思うので、特に親要素に高さの指定はしていないのですが、
paddindを設定すると親要素からはみ出てしまうのですが（子要素の下側が親要素からはみ出てしまいます）
これはなぜでしょうか？

親要素の中に収まるようにするには、親要素の高さの指定が必要なのでしょうか？

html
1<div id="jelWapper">
2<div class="jel">
3  <p>
4    ワンカラー（ラメ・グラ）
5  </p>
6  <p>
7    60分
8  </p>
9  <p>
10    4500円
11  </p>
12</div>
13<div class="jel">
14  <p>
15  フレンチ（ラメ・ライン・カラグラ）
16  </p>
17  <p>
18    90分
19  </p>
20  <p>
21    5500円
22  </p>
23</div>
24</div>

css
1#jelWapper{
2	width: 1000px;
3	border: 1px solid rgb(68, 231, 217);
4  margin-top: 20px;
5	background: #f6eed1;
6	display: flex;
7	justify-content: space-around;
8	align-items: center;
9	padding: 30px;
10}
11
12.jel{
13	width: 300px;
14	background: url("../img/reserve/select_off.png");
15	background-size: cover;
16}