子组件高于其父div

Question

我开始使用react并必须构建一个时钟组件。

我希望我的父div具有与子组件相同的高度。 为什么孩子的身高不会影响其父母的身高？

HTML ：

import React, { useState, useEffect } from "react";
import "./clock.scss";

export const Clock = () => {
  let [date, setDate] = useState(new Date());

  useEffect(() => {
    let timer = setInterval(() => setDate(new Date()), 1000);

    return function cleanup() {
      clearInterval(timer);
    };
  });

  return (
    <div className="clock-wrapper">
      <span className="test">
        {date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
      </span>
    </div>
  );
};

export default Clock;

SCSS （其他组件还没有CSS）。 类“测试”-绿色容器。 类“ clock-wrapper”-红色容器。

.dashboard {
    display: flex;
    justify-content: space-between;
    padding: 25px 40px 25px 40px;
}



.clock-wrapper {
$_size-100: 100px;

}

.test {
    color: $color-pickled-bluewood;
    font-size: $_size-100;
    font-weight: bold;
}

具有当前结果的图像。 红色边框是父母的大小。 具有背景颜色的绿色边框是儿童组件。

谢谢你的帮助。