javascript - CSS横棒グラフ-幅の管理

Question

左右のパーセンテージが異なるさまざまな横棒グラフを表示するサイトがあります。

これが私の言いたいことのスクリーンショットです：

不均衡なバー幅に遭遇するまで、すべてが素晴らしいです：

だからここで少しアドバイスを探しています。この場合、2つのバー間の相対的な比例関係をある程度維持しながら、1％などの非常に低いパーセンテージを完全に表示できるように、幅をどのように処理することをお勧めしますか？ピクセル幅でパディングし、バッファ幅％を加算/減算してみましたが、まだ満足のいくものはありません。

これが私の現在のHTML/CSSです：

HTML：

<div class="graph-outer">
    <div class="inner-left-cap"></div>
    <div class="inner-left-bar">1%</div>
    <div class="inner-right-bar">99%</div>
    <div class="inner-right-cap"></div>
</div>

CSS：

.graph-outer {
    background: black;
    height: 20px;
    width: 150px;   
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
}

.inner-left-cap {
    background: orange;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 1%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 98%;
    height: 100%;
    text-align: center;
    float: left;
}

<ahref = "http://jsfiddle.net/2ZkDz/126/" rel = "nofollow noreferrer"> http://jsfiddle.net/2ZkDz/126/