html - CSS - 在填充中放置滚动条

Question

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

具有特定高度的 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>

CSS

.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;
  }

查看这个 JsFiddle http://jsfiddle.net/ushLprzd/1/

我希望第二个示例看起来像第一个示例，但带有滚动条。有谁知道这个的解决方案？有可能吗？

Answer 1

只需删除文本aling: justify;和 padding-right:20px;

或

给 margin-right:-20px;到内部内容