Html CSS-将滚动条放置在填充中

我有一个问题，我不知道如何解决它

具有特定高度的div容器的右侧有一个填充。如果容器的内容太大，我希望滚动条显示在此容器的填充空间中

HTML

<div class="top-content">
  <div class="inner-content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes
  </div>
</div>
<div class="bottom-content">
  <div class="inner-content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. 
  </div>
</div>

看到这个了吗

---

我希望第二个例子看起来像第一个，但是有一个滚动条。有人知道这个问题的解决方案吗？甚至可能吗？

只需删除文本aling:justify；右和右：20px

或

---

给予利润权：-20px；对内在内容的理解似乎不起作用。你能把它放在桌子上吗？

.top-content {
    padding-right: 20px;
    text-align: justify;
    border: 1px solid #DDD;        
  }
  .inner-content {
    border-right: 1px solid #DDD;       
  }     
  .bottom-content {
    overflow-y: auto;
    text-align: justify;
    height: 100px;
    border: 1px solid #DDD;
    padding-right: 20px;
    margin-bottom: 50px;
  }
  .bottom-content > .inner-content {
    min-height: 100px;
  }