Html 子组件高于它'；s父分区

我开始使用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;

具有当前结果的图像。红色边框是父级大小。带有背景色的绿色边框是子组件。

---

谢谢你的帮助。

你必须给我们你的css，以便找出哪里出了问题。我添加了额外的css。到目前为止，只有“dashboard”、“clock wrapper”和“test”元素具有css。绿色容器的css在哪里？它在类“test”下。我已经做了一些stackblitz，但在您提供的css之后看起来还可以：

.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;
}