问题是.container的高度。它被限制在视口的高度。当滚动时（因为左边的.smallcontainer有溢出），这会导致在你的黄色标记处“丢失”背景颜色。
将容器的子容器也设置为height: 100vh会阻止测试成功。
解决方案：
1.删除孩子的身高（或设置为height: auto;）
1.将.container的高度设置为height: fit-content;
这里是测试样本：

/* Global Code: */

html {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

/* Flex Container */

.container {
  display: flex;
  flex-direction: row;
  height: fit-content;      /* not:  heigth: 100vh; */
  min-height: 100%;
  
  background-color: #bbf;   /* Helper-code to        */
  margin: 2%;               /* visualize the problem */
}


/* Flex Container children */

.largesection{
  padding: 5px;
  border-radius: 4px;
  width: 100%;
  background-color: #f6f6f7;
  
  display: flex;           /* Helper-code to adapt the sample */
}

.smallsection {
  background-color: #fff;
  padding-top: 25px;
  padding-bottom: 30px;
  width: 30%;
  border-right: 1px solid #e1e3e5;

  background-color: #fffa;  /* Helper-code: make BG transparent to see the parent's BG */
}


/* Helper-code to adapt the sample's layout */

.largesection p {
  width: 50%;
  font-size: 1.3em;
}

.largesection img {
  min-width: 100%;
}

<div class="container">
    <div class="smallsection">
        <p>Here is the left column.</p>
        <p>To be long enough here some lorem ipsum:</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus rutrum posuere. Sed vitae auctor sem. Quisque a elit a elit accumsan varius. Morbi vel faucibus ante, faucibus sagittis justo. Morbi porta ex a magna tempus sagittis. Sed varius, nulla in bibendum rhoncus, dui odio maximus quam, in posuere lorem nisi quis ex. Nulla facilisi. Sed lacinia, enim et tempus sagittis, ex arcu tincidunt nisl, et hendrerit diam magna a lorem. Nam porttitor leo mauris, sed sagittis enim consectetur nec. Integer pretium tincidunt nisl, et semper lorem rhoncus ac. Etiam vestibulum molestie interdum. Maecenas augue leo, blandit nec magna iaculis, tincidunt semper turpis. Nulla ullamcorper odio quam. Nulla sed semper elit. In ipsum mauris, ultricies ut tempus quis, mattis eget felis. Curabitur molestie rhoncus nisl, et molestie sapien ultricies eget.</p><p>Quisque elementum sodales faucibus. In tempor, sapien sit amet convallis ullamcorper, arcu nibh ultrices lacus, eu suscipit nulla augue vel lectus. In gravida, sapien sed blandit tempus, leo nunc interdum tortor, et iaculis purus ligula in odio. Vestibulum commodo sit amet ligula et gravida. Praesent rutrum blandit pellentesque. In mattis lorem accumsan, vulputate massa in, accumsan magna. Phasellus sit amet aliquam diam. Cras orci urna, cursus vel felis non, rutrum iaculis nibh. Aenean vel magna blandit, luctus odio et, accumsan mi. Sed at ipsum neque. Curabitur dolor sapien, tempor sit amet fringilla et, auctor non purus. Quisque feugiat orci non maximus interdum. Duis faucibus nunc est, in posuere metus fermentum suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a hendrerit lacus. Pellentesque placerat ante in dapibus vestibulum.</p><p>Maecenas in urna at mi vulputate commodo. Proin dapibus porta risus in volutpat. Aenean sollicitudin scelerisque sodales. Aenean molestie lorem id magna rutrum aliquet. Aenean euismod dui vel purus porta hendrerit. Maecenas vel consectetur turpis, vel bibendum neque. Nulla vehicula dui ex, id tincidunt ligula sagittis in. Cras ut viverra purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis, massa ut mattis sollicitudin, quam neque sagittis diam, in congue metus lectus at nisi.</p><p>Quisque sapien mauris, dapibus sed eleifend nec, rhoncus eget risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eu quam at lacus aliquet ultrices. Nulla et tellus sit amet ipsum fringilla lacinia luctus in lacus. Aenean auctor vulputate blandit. Duis a nulla lacinia, placerat magna a, ultricies lorem. Donec non nulla odio.</p>
    </div>
    <div class="largesection">
        <p>Nunc non lorem quam. Vestibulum odio nibh, pretium nec iaculis sit amet, aliquet nec elit. Etiam iaculis pretium urna sagittis luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean aliquet tincidunt dui, non or nare lacus mattis quis. Maecenas sapien dolor, rhoncus sit amet dictum quis, dictum a dolor. Integer sollicitudin arcu eu libero luctus, et facilisis urna tempus. Phasellus vitae libero eget magna imperdiet feugiat. In hac habitasse platea dictumst.</p>
        <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADIAQMAAAD82yWhAAAAA1BMVEU/f72VOjV/AAAAIUlEQVRo3u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAIAXAyfYAAGcQGgRAAAAAElFTkSuQmCC"></p>
    </div>
</div>

这是一个2列全高布局。
你可以给予它加边框、填充等，使其符合你的目的。

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
.container,
.smallsection,
.largesection {
  min-height: 100%;
}
.container {
  display: flex;
}
.smallsection {
  width: 30%;
  border-right: 1px solid #e1e3e5;
  background: silverr; /* your color #fff */
}
.largesection {
  width: 70%;
  background: silver;
  background-color: #f6f6f7;
}

<div class="container">
  <div class="smallsection">
    Left column<br>abc<br>abc<br>abc
  </div>
  <div class="largesection">
    Right column<br>def<br>def<br>def
  </div>
</div>