css - 横スクロールとカットdiv

Question

ブログに配置するトップバーがあります:

<nav class="top-bar blog">
    STACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOW
</nav>

<style type="text/css">
    .top-bar.blog {
        width: 100%;
        white-space: no-wrap;
        background: violet;
        ...
    }
    body {
        background: black;
    }
</style>

ブラウザ ウィンドウのサイズを小さくして水平バーを表示すると、次のようになります。

これは期待される結果です。

右に水平にスクロールすると、結果は次のようになります。

div がカットされます。

奇妙なことに、stackoverflow.com のトップバーにも同じ問題があります。

サイズが「カット」されるのではなく、ウィンドウの右側の部分に調整されたままになるように、これを防ぐにはどうすればよいですか?

Answer 1

トップバーをまったく動かしたくない場合はposition: fixed、幅を削除して、上、左、右の位置を設定してみてください。例えば：

.top-bar.blog {
    position: fixed;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 50px;
    white-space: no-wrap;
    background: violet;
    overflow: hidden;
}

上、左、右、および高さの数値を任意に変更します。

Answer 2

これは私にとってはうまくいきます。

設定overflow:hidden width:100%してから、パディングとマージンだけを設定します。