Absolute div inside flexbox div behaving like fixed

Question

I'm designing a responsive chat page view on react and i'm struggling with the following problem.

I have a div menu with absolute position which is displayed on top of all the elements when click the menu button as you can see here:

Everything seems ok, even when i resize the screen to phone dimentions it displays as i expect because i have a media query which modifies the left property to fit the div where i want. But on the phone view, when i scroll the page the div moves in its offset position along the screen and i couldn't fixing it:

As far i know this behavior corresponds to fixed position, i've got understood that if i apply an absolute position the div should stays on his place. But i don't know what is happening here. Maybe it may be messing up it because i'm working with flex (everything is positioned with flex using its direction property to arrange my elements).

This is my JSX code:

return (
    <div id="chat-page-main-container" onClick={onMainContainerClick}>
      <div id="chat-main-menu-select" style={{ display: displayMenu }}>
        <ul className="list-group">
          <li className="list-group-item">Profile</li>
          <li className="list-group-item">Create new group</li>
          <li className="list-group-item">Log out</li>
        </ul>
      </div>

      <div id="chat-left-side-content">
        <div id="chat-main-menu">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/e/e8/The_Joker_at_Wax_Museum_Plus.jpg"
            alt="unavailable"
          />
          <div id="chat-main-menu-options">
            <div className="main-menu-options-icons">
              <i id="chat-comment-icon" className="fa fa-comments"></i>
            </div>
            <div
              className="main-menu-options-icons"
              style={{ backgroundColor: selectedItem }}
            >
              <i
                id="chat-menu-icon"
                className="fa fa-bars"
                onClick={onMenuIconClick}
              ></i>
            </div>
          </div>
        </div>
        <div id="search-conversation-bar">
          <i className="fa fa-search"></i>
          <input type="text" placeholder="Search for a conversation" />
        </div>
        <div id="chats-component-container">
          {data.map((object, index) => (
            <ChatCard key={index} data={object} />
          ))}
        </div>
      </div>

      <div id="chat-right-side-content">
        <div id="conversation-splash-screen">
          <img src={conversationImage} alt="unavailable" />
          <h3>Welcome to tellit chat page!</h3>
          <p>
            You can search for a contact or a conversation on the left menu.
          </p>
        </div>
      </div>
    </div>
  );

And this is my SASS code:

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: whitesmoke;
}

::-webkit-scrollbar-thumb {
    background: #bababa;
}

#chat-page-main-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;

    #chat-main-menu-select {
        position: absolute;
        top: 4em;
        left: 12em;

        ul {
            border-radius: 5px;
            cursor: pointer;
        }

        li:hover {
            background-color: #ededed;
        }
    }

    #chat-left-side-content {
        display: flex;
        flex-direction: column;
        min-width: 400px;
        height: 100%;
        border-right: solid 1px #bababa;

        #chat-main-menu {
            width: 100%;
            height: 71px;
            padding: 10px 25px;
            border-bottom: solid 1px #bababa;
            background-color: #EDEDED;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                float: left;
            }

            #chat-main-menu-options {
                display: flex;
                flex-direction: row;
                float: right;
                height: 100%;
                padding-top: 5px;

                .main-menu-options-icons {
                    font-size: 25px;
                    opacity: 0.5;
                    text-align: center;
                    width: 40px;
                    border-radius: 50%;
                    margin: 0 10px;

                    i {
                        cursor: pointer;
                    }
                }
            }
        }

        #search-conversation-bar {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            background-color: #EDEDED;
            padding: 10px 0;
            border-bottom: solid 1px #bababa;

            input {
                border-radius: 30px;
                border: none;
                width: 85%;
                height: 40px;
                font-family: "Segoe UI";
                font-size: 13px;
                padding: 0 43px;

                &:focus {
                    outline: none;
                }
            }

            i {
                font-size: 20px;
                position: relative;
                left: 30px;
                top: 10px;
            }
        }

        #chats-component-container {
            overflow-y: auto;
            overflow-x: hidden;
        }
    }

    #chat-right-side-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: white;

        #conversation-splash-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 5em;

            img {
                width: 30em;
                height: 30em;
            }
        }
    }
}

@media (max-width: 500px) {
    #chat-left-side-content {
        min-width: 300px !important;
    }

    #chat-right-side-content {
        min-width: 600px !important;

        #conversation-splash-screen {
            padding-top: 3em !important;
        }
    }

    #chat-main-menu-select {
        left: 6em !important;
    }
}

Another fact i want to add is that i also tried to change the absolute position to relative, but this last mess up the container div displaying a space blank or rearranging the elements inside.

Any suggestion or code correction is welcome. Thank you.

Answer 1

set position: relative for parent (#chat-page-main-container)