根据大多数行的子表调整容器的高度

Question

我有一个自定义的Span元素，我将其设置为初始高度，以呈现html表元素的矩阵。我想让Span根据最高的表格（即大多数行）动态更改其高度，同时还可以设置初始高度。如果删除Span组件中的高度，它将模拟我要实现的目标。但是，Span必须渲染是否有要渲染的矩阵。

https://codesandbox.io/s/little-frost-zw9ir

import React from "react";
import "./styles.css";
import styled from "styled-components";'

const Matrix = ({ matrix }) => {
  return (
    <table>
      {matrix.map((row, i) => (
        <tr>
          {row.map((col, j) => (
            <td>
              <input size={1} />
            </td>
          ))}
        </tr>
      ))}
    </table>
  );
};

const Span = styled.span`
  position: absolute;
  left: 25%;
  top: 40%;
  height: 5%;
  width: 50%;
  background-color: #ffe5cc;
  display: flex;
  align-items: center;
  &:hover {
    cursor: text;
  }
  & > span {
    height: 100%;

    & > table {
      height: 100%;
      background-color: #fff;
    }
  }
`;
const matrices = [[[1, 2], [3, 4]], [[1], [2], [3]]];
export default function App() {
  return (
    <div>
      <Span>
        {matrices.map(matrix => (
          <span>
            <Matrix matrix={matrix} />
          </span>
        ))}
      </Span>
    </div>
  );
}