Ytukyg

My goal here is to make the header of this chatbox be scrollable when the number of elements exceeds the maximum width. I have currently tried to apply the word wrap (no wrap) however that doesn't work and positioning it to absolute seems to break my chats interface and still doesn't work. I need it to be scrollable instead of breaking onto new lines. How do I do this?
HTML Code:

<div class="chatContainer" id="chatContainer">

                    <div class="chatHeader">

                        <div class="chatHeaderItem">Global</div>

                        <div class="chatHeaderItem">xExemplaryx</div>

                        <div class="chatHeaderItem">Ninja</div>

                        <div class="chatHeaderItem">NotTfue</div>

                        <div class="chatHeaderItem">Myth</div>

                        <div class="chatHeaderItem">Global</div>

                        <div class="chatHeaderItem">xExemplaryx</div>

                        <div class="chatHeaderItem">Ninja</div>

                        <div class="chatHeaderItem">NotTfue</div>

                        <div class="chatHeaderItem">Myth</div>

                    </div>

                    <div class="chatWindow">

                        <div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>

                        <div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>

                        <div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>

                    </div>

                    <div class="chatFooter">

                        <input type="text" class="chatInputField" />

                        <div class="chatFooterLabel">Send</div>

                    </div>

                    <div class="chatRoles">

                        Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>

                    </div>

                </div>

CSS:

.chatHeader {

    height: auto;

    width: 100%;

    border-bottom: 2px solid black;

    background: rgba(0,0,0,1);

    overflow-x: auto;

    display: inline-block;

}

.chatHeaderItem {

    color: white;

    padding: 10px;

    padding-left: 15px;

    padding-right: 15px;

    font-size: 14px;

    display: inline-block;

    transition: all 0.20s linear;

    margin: 0;

    text-align: center;

}

.chatHeaderItem:hover {

    background: rgba(255,100,0,0.3);

    cursor: pointer;

}

.chatContainer {

    border: 2px solid black;

    position: relative;

    font-size: 0;

}

.chatWindow {

    max-height: 300px;

    overflow-y: auto;

    background: rgba(0,0,0,0.3);

    padding: 8px;

    padding-left: 14px;

    padding-right: 14px;

    color: white;

    font-size: 12px;

}

.chatFooter {

    background: rgba(0,0,0,0);

    color: white;

    height: 40px;

}

.chatFooterLabel {

    background: rgba(0,0,0,1);

    padding: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin: 0;

    width: calc(25% - 20px);

    font-size: 14px;

    height: calc(100% - 20px);

    float: right;

    transition: all 0.20s linear;

}

.chatFooterLabel:hover {

    cursor: pointer;

    background: rgba(255,100,0,0.3);

}

.chatInputField {

    background: rgba(0,0,0,0.6);

    padding: 10px;

    margin: 0;

    display: inline-block;

    border: none;

    width: calc(75% - 20px);

    font-size: 14px;

    color: white;

    float: left;

    height: calc(100% - 20px);

    transition: all 0.20s linear;

}

.chatMessage {

    display: block;

    word-wrap: break-word;

}

.chatTime {

    color: rgba(250, 250, 230, 0.4);

    font-size: 10px;

}

.chatUser { color: #747474; text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black; }

.chatXbox { color: #00FF74; text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d; }

.chatPlaystation { color: #4285f4; text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7; }

.chatPC { color: #6441a4; text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf; }

.chatMod { color: #FFD700; text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c; }

.chatAdmin { color: #ff5719; text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange; }



.chatRoles {

    font-size: 10px;

    background: black;

    padding: 2px;

    padding-left: 16px;

    padding-right: 16px;

}

Live JSFiddle Example: http://jsfiddle.net/sjac7du9/

You can use display:flex for the parent container and add overflow-x:scroll

.chatHeader {

    overflow-x:scroll;

    display:flex;

}

By default the direction of flex is horizontal.