親要素にoverflow:scroll heightで表示したい高さを指定。隠した子要素の高さが残るのをなくしたい。

div class=company-details-wrap__innerに高さ(718px) overflow: scroll;を指定して子要素を下スクロールで見せたく以下のようにHTML SCSSを書きました。

HTML
1<section class="dashbord">
2    <div class="dashbord__inner">
3        <div class="sidebar">サイドバーの要素</div>
4        <div class="dashbord-main">
5            {添付画像青色箇所以外の要素}
6            <div class="company-details-wrap">
7                <div class="company-details-wrap__inner">
8                    <section class="company">
9                        { overflow: scroll; height: 713px; で下スクロールで見せたい要素の中身。}
10                    </section>
11                </div>
12            </div>
13        </div>
14    </div>
15</section>

SCSS
1.dashbord {
2    background-color: red;
3    display: flex;
4    justify-content: space-between;
5
6    .sidebar {
7        height: 100vh;
8    }
9
10    .company-details-wrap {
11        margin-bottom: 39px;
12
13        .company-details-wrap__inner {
14            background-color: #ffffff;
15            border-radius: 21px;
16            box-shadow: 0 5px 25px rgb(0 0 0 / 16%);
17            height: 713px;
18            overflow: scroll;
19        }
20    }
21}
22