CSS – position: fixed;を親要素の幅に合わせる

position: fixed;を使った要素を親要素の横幅に合わせたい場合width: inherit;と指定すると自動的に親要素の横幅に調整されるようになります。

inheritは簡単に説明すると親要素の値を子要素に継承する値になります。例えば親要素がwidth: 200px;として子要素にwidth: inherit;とした場合、子要素の横幅はwidth: 200px;となります。

サンプルコード

inheritをうまく機能させるにはブロック要素でうまく囲ってあげ親要素のwidthを指定してあげることです。きちんとブロック要素を囲まないと機能しないので注意が必要です。

<div class="wrap_contants">
    <aside>
        <div class="sidebar">
            <h1>Fixed</h1>
            <div>
                ~~省略~~
            </div>
        </div>
    </aside>
    <main>
        <article>
            <div class="contents_area">
                <h1>title</h1>
                ~~省略~~
            </div>
        </article>
    </main>
</div>

.wrap_contants{
    display: flex;
    max-width: 1200px;
    margin: auto;
    flex-flow: row;
    justify-content: space-around;
}
.wrap_contants aside{
    width: 300px;
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
}
aside .sidebar{
    position: fixed;
    background: #fff;
    border-radius: 10px;
    top: 20px;
    width: inherit;
}