如何防止 position:fixed 破坏 flexbox justify-content？

如何解决如何防止 position:fixed 破坏 flexbox justify-content？

如何防止父容器的 position:fixed 破坏其 justify-content 属性？ 我正在尝试使用 flexBox 创建一个固定的菜单栏。

示例 https://codepen.io/dnguyencode/pen/XWjgxKG

<style>
*{
    border: 1px black solid;
}


.nav{
    display: flex;
    justify-content: space-between;
    // position: fixed;
    height: 100px;

}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>

解决方法

为图像添加宽度 100%，然后它会正确地适应。

<style>
*{
    border: 1px black solid;
}
.nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    width:100%;
    height: 100px;
}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img" width="100%">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>```