Align подменю для отображения гибкого меню родительского

Question

У меня есть подменю под меню, которое имеет свойство display: flex и элементы списка имеют свойство flex-grow: 1

Я хотел бы, чтобы выровнять подменю, так что ссылки совмещена с родителем, как так:

Это работает, потому что я дал в подменю свойство left: 19px. Это работает, но проблема в том, что, поскольку меню и его элементы отображаются flex, когда браузер сжимает ширину элемента списка, он сжимается, поэтому подменю не выравнивается. Ниже приведен скриншот, когда браузер сжался 200px:

Есть ли класс CSS или что я могу сделать, чтобы иметь подменю ссылки совпадают с родительскими ссылки на браузер сжиматься? Я мог технически сделать тонну медиа-запросов и изменить left:, но я думал, что спрошу, есть ли у кого-то лучшее решение.

Вот мой код. Я удалил много, но оставил код, который казался необходимым для этого вопроса.

#menu-main-menu { 
 
    display: flex; 
 
} 
 
#menu-main-menu li { 
 
    float: left; 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#menu-main-menu li a { 
 
    display: inline-block; 
 
    padding: 40.5px 0; 
 
} 
 
#menu-main-menu .menu-item-has-children .sub-menu { 
 
    position: absolute; 
 
    left: 19px; 
 
}

<ul id="menu-main-menu"> 
 
    <li class="menu-item-has-children"> 
 
    <a href="http://localhost:8888/services/" class="">Services</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#" class="">Child Page</a></li> 
 
     <li><a href="#" class="">Child Page</a></li> 
 
     <li><a href="#" class="">Child Page</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Blog</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul>

Answer 1

Проблема вы описали в своем вопросе не может быть воспроизведен с кодом предоставленной вами. Однако, основываясь на ваших объяснений, вот две вещи, чтобы рассмотреть следующие вопросы:

• An initial value of a flex container is flex-shrink: 1. Это означает, что гибкие элементы имеют возможность сжиматься, чтобы помещаться внутри контейнера (предотвращая переполнение). Чтобы отключить сжатие, добавьте flex-shrink: 0 для гибких элементов.

• Floats are ignored in a flex container.

Кроме того, в качестве общего руководства, рассмотреть эти правила, а также:

• Absolutely positioned flex items do not participate in flex layout.

• A flex item cannot, by default, shrink past the size of its content.

Один из факторов, указанных выше, может вызывать или, по крайней мере, способствовать вашей проблеме.