How to get a flex element to be aligned with top of my sidebar-CodePudding

The following is what my website currently looks like, I made a side navigation bar that will have links. Placeholder items 'test2' and 'test3'. I need to get it to start at the top of page.

My ultimate goal is to toggle the sidebar when menu icon is clicked; therefore, the content of the page needs to resize to fill the page, hence why I used flex. Here is my code:

    <div  style="
    display: inline-block;
    margin:0px;  width: 175px; 
    background-color: black; 
    box-shadow: 1px 0 3px -1px white;
    height: 100%;
    overflow: hidden;">
    
    <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>

</div>


    <div 
    style=" 
        display: flex;
        flex-wrap: wrap;">

        <div class='column' 
        style="flex: auto;
            margin: 5px;
            padding: 15px;
            background-color: rgb(0,0,0,0);
            text-align: center;
            overflow: hidden;">
            Test2
        </div>
        <div class='column'>
            Test3
        </div>
    </div>

It is quite apparent I am really struggling with understanding flow of elements on a page. Is there a detailed video that can explain this all?

CodePudding user response：

Do you mean something like this??

<div  style="
        display: inline-block;
        margin:0px;  width: 175px; 
        background-color: black; 
        box-shadow: 1px 0 3px -1px white;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;">
        
        <hr>
        <a href="" style="display:block; padding: 15px;">test</a> <hr>
        <a href="" style="display:block; padding: 15px;">test</a> <hr>
        <a href="" style="display:block; padding: 15px;">test</a> <hr>

    </div>
    

        <div 
        style=" 
            display: flex;
            flex-wrap: wrap;">
    
            <div class='column' 
            style="flex: auto;
                margin: 5px;
                padding: 15px;
                background-color: rgb(0,0,0,0);
                text-align: center;
                overflow: hidden;
                ">
                Test2
            </div>
            <div class='column'>
                Test3
            </div>
        </div>

CodePudding user response：

I figured it out. This is what I was going for! If I add more links to the navbar on the side, it overflows but maintains a single page size. Thanks again!!

    <div  style="height: calc(100% - 120px); ">
    <div  style="overflow:hidden; overflow-y: visible;"> 
        <div style="">
    <a href="" style="display:block; padding: 15px;">Browse</a> <hr>
    <a href="" style="display:block; padding: 15px;">Rabbit Hole</a> <hr>
    <a href="" style="display:block; padding: 15px;">Untitled Game</a> <hr>
    <a href="" style="display:block; padding: 15px;">Shop</a> <hr>
</div>
    </div>
    
        <div class='column' >
            Test2
        </div>
        <div class='column'>
            Test3
        </div>
    </div>