Set header with logo and navbar inside div with width: max-content to fit on the window-CodePudding

I have one div with width: max-content which contents everything and goes beyond the window size.

I would like to put inside that .pageWrapper another div .page-header which should have on the left of the page logo and on the right menu navbar. And it should be sticky so when I scroll horizontally to the right the elements of the page-header stays sticky.

My problem is that "menu navbar" in this case won't be visible on the page. They only be at the end of the right side of the page, which is goes beyond the window size.

How to set .page-header width so that "menu navbar" will stay on the right side of the window and be responsive (always stays at the right if page will be resized) ?

<div >
    <div >
            <div ></div>
            <div ></div>
    </div>
    <div >
        //.. some big table
    </div>
</div>

Here is some example how it looks like right now:

Jsfidlle: https://jsfiddle.net/ku1jprbz/

CodePudding user response：

If you want the navbar to have the screen width you can try to use vw for the width.

.pageWrapper {
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    background-color: white;
}

Hope this helps