[Menu] Issue with Dropdown "Left Menu" inside UI Menu

[msarris]

I'm trying to make a menu with a dropdown which sub menus are displayed left instead of the default right. When I change "menu" to "left menu" on the sub menus, they are displayed left like I want to, but they will be displayed horizontally.

Some code to demonstrate:

<div class="ui menu">
    <div class="ui dropdown icon item">
        <i class="settings icon"></i>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">
                <i class="left dropdown icon"></i>
                <span class="text">Sub 1</span>

                <div class="left menu">
                    <a class="item" href="#"><span class="text">Sub sub 1.1</span></a>
                    <a class="item" href="#"><span class="text">Sub sub 1.2</span></a>
                    <a class="item" href="#"><span class="text">Sub sub 1.3</span></a>
                </div>
            </div>
            <div class="item">
                <i class="left dropdown icon"></i>
                <span class="text">Sub 2</span>

                <div class="left menu">
                    <a class="item" href="#"><span class="text">Sub sub 2.1</span></a>
                    <a class="item" href="#"><span class="text">Sub sub 2.2</span></a>
                    <a class="item" href="#"><span class="text">Sub sub 2.3</span></a>
                </div>
            </div>
        </div>
    </div>
</div>

I pinpointed the problem to a flexbox display, which is assigned in the following CSS rules:

/* Left Floated */
.ui.menu:not(.vertical) .left.item,
.ui.menu:not(.vertical) .left.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: auto !important;
}

/* Right Floated */
.ui.menu:not(.vertical) .right.item,
.ui.menu:not(.vertical) .right.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto !important;
}

When I override these rules with a display: block; the problem disappears.

Is my markup wrong, or am I not aware of a feature of the menus, or is it a bug?

[jlukic]

This is definitely a bug, generally dropdown has specific rules when defined in the context of a menu. It appears left menu (going to left direction) is being obviously mistaken for left menu (floated left).

http://jsfiddle.net/goujnrmo/

[eveevans]

I don't know exactly how to replicate this, but
with Semantic UI 2.2.17 I'm having a similar Issue