强制Flex元素将自身宽度调整为孩子的宽度

Question

div1在需要时具有滚动条。我需要div2自动将其宽度调整为孩子的宽度。当前，当您水平滚动时，您会看到在暗黄色区域之后会有一个切口。黄色区域表示div2，其宽度应为其父级宽度的20px + 300px。

我可以使用任何技巧吗？ （当然，我可以将宽度显式设置为320px ...）

#div1 {
  width: 200px;
  overflow: auto;
  
  height: 200px;
  background: grey;
}

#div2 {
  display: flex;
  height: 100%;
  background: yellow;
  min-width: 100%;
}

#div3 {
  flex: 0 0 auto;
  width: 20px;
  background: red;
  opacity: 0.5;
}

#div4 {
  flex: 0 0 auto;
  background: black;
  width: 300px;
  opacity: 0.5;
}

<div id="div1">
  <div id="div2">
    <div id="div3">

    </div>
    <div id="div4">

    </div>
  </div>
</div>