using overflow:hidden carefully with sub-menu is inside the element

My situation: I want my menu contains 2 items: username text, user icon (contain sub-menu with 1 item: Sign Out) always same align horizontal even resize window (becaues window's width is not enough to contain both items. So I used the css code like

ul.navbar-top-links {
  overflow: hidden;
  height: 50px; // example
}

with html code

<ul class="navbar-right nav navbar-top-links navbar-nav">
    <li class="navbar-text navbar-text-name">
        Username
    </li>
    <li class="dropdown dropdown-user">
        <a class="dropdown-toggle dropdown-toggle-user" data-toggle="dropdown" aria-expanded="false">
            <i class="fa fa-user fa-2x"></i>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href><i class="fa fa-sign-out fa-fw"></i> Sign out</a>
            </li>
        </ul>
        
    </li>
</ul>

Result like I expected except one point: sub-menu didn't show because it is inside <ul>. Solution is that

using javascript to hiding elements are not necessary when width of window is not enough (pros: dynamic, cons: need to more programming)
or using css media query: hiding elements when width < specific value (pros: fast to implement, cons: not dynamic if elements have dynamic width, ex: element is username)
or using css media query with defining elements have dynamic width are pre-defined width like that

.navbar-text-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
@media (max-width: 500px) { /* example */
  .navbar-text-name {
    display: none;
  }
}

Above exmaple just have 2 items and .dropdown-user is always right top position, so I changed html code and make .dropdown-user has position: absolute; like that

.navbar-text-name {
    margin-right: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

ul.navbar-top-links {
    position: absolute;
    top: 0;
    right: 0;
}

<div>
    <div class="navbar-text navbar-text-name">
        Username
    </div>
    <ul class="navbar-right nav navbar-top-links navbar-nav">
        <li class="dropdown dropdown-user">
            <a class="dropdown-toggle dropdown-toggle-user" data-toggle="dropdown" aria-expanded="false">
                <i class="fa fa-user fa-2x"></i>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a href><i class="fa fa-sign-out fa-fw"></i> Sign out</a>
                </li>
            </ul>
            
        </li>
    </ul>
</div>

Or using flex property (ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/) if your website just support IE >= 10

khoand0000/using-overflow-hidden-carefully.md