如何修复div定位＆amp;修复盒子之间的空间

Question

我试图让几个div框看起来完全{{3}}。 我基本上要做的是在页面左侧放置一个名为“关于我”的div框，然后在右侧放置3个小型滚动框，当您将鼠标悬停在它们上方时也会打开。它们全部位于父div中，宽度为720px，因为允许框在该边框内达到的最大宽度，高度不受限制。 现在，如果您运行代码，您可以解决几个我想要解决的问题。

1. 当你将鼠标悬停在右边的方框上时，当他们应该保持固定到原位并且每次打开时都被推下来（如果你理解我的意思） ）

2. theres应该是右边小滚动框之间的空格。如果你将鼠标悬停在第二个滚动条上，你可以看到它（margin-top：10px），但出于某些原因，当你没有把它们紧紧地放在一起并且空间消失时

3. 我和左边的关于我和3个小滚动框的问题有同样的问题。 theres应该是50px之间的空间。但无论我尝试什么，它都无法奏效。我设法在它们之间创建空间的唯一方法是添加一个名为mid的div（在代码中注释）以在它们之间创建空间，但这是一种非常低效的方法。而且我不明白为什么他们如此接近

先谢谢所有助手 - 我将代码添加到代码片段中，以便你们可以运行它

＆＃13;
＆＃13;
  
    .parent
    {

        width:720px;
    }
    .Scrollbox
    {
        float:left;
        background:rgba(19,150,150,0.5);
        border:5px solid teal;
        width:200px;
        overflow-y: scroll;
        transition: height 1s ease;
        border-radius:10px;

    }
    .right
    {
        right:0;
        margin-left:50px; 
    }
    
   /*.mid
    {
        margin-left:50px;
    } */
    
    .Scrollbox:hover
    {
        margin-top:10px;
        height:200px;
        overflow-y: scroll;
    }

    .about
    {
        float:left;
        overflow-y: scroll;
        background:rgba(19,150,150,0.5);
        border:5px solid teal;
        text-align:center;
        border-radius:10px;
        transition: height 1s ease;
        overflow: hidden;
    }

     .about p
    {
        color:White;

    }

    .about h2
    {

        color:#002020;

    }
    
    .about :hover 
    {
        height:200px;
        overflow-y: scroll;
    }

    .Scrollbox p
    {
        color:White;

    }

    .Scrollbox h2
    {

        color:#002020;

    }

      .Scrollbox h3
    {

        color:#004040;

    }
＆＃13;
<div class="parent">
    <div class="about"><h1>Supposed to be big box to the left</h1></div>
    <div class=mid></div>
    <div class=right>
    <div class="Scrollbox"><p>scroll 1 supposed to be right side</p></div>
    <div class="Scrollbox"><p>scroll 2 supposed to be right side</p></div>
    <div class="Scrollbox"><p>scroll 3 supposed to be right side</p></div>
    </div>
＆＃13;
＆＃13;
＆＃13;