CSS：边框被滚动条切断

Question

我的CSS：

.ConnectionBox:hover
{
    background-color: rgba(255, 255, 255, 0.7);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border: #solid 5px #000;
}

我的HTML：

<div class="ConnectionBox" style="width:600px;height:350px;font-size: 12px; padding-left: 5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;border-radius: 5px;border:1px solid #000; overflow-y: auto; text-align: left;">
Blablabla
Blablabla
Blablabla
</div>

边框在右侧被切断（查看右上侧和右下侧），这是jsfiddle链接，我该如何解决这个问题？

Answer 1

尝试这个：

http://jsfiddle.net/realdeepak/Lbu8dvLx/1/

HTML：

<div class="ConnectionBox">
    <div class="box-content">
        <ul>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
            <li>CPU Model : MIPS 24Kc V7.4</li>
        </ul>
    </div>
</div>

CSS：

.ConnectionBox{
      height:300px;
      width:450px;
      border-radius:10px; 
      border:2px solid #666;
      padding:6px 0px;
      background:#ccc;
    }

    .box-content{
      height:300px;
      width:450px;
      overflow:auto;
      border-radius:8px;
    }