I have a horizontal line element connected to a nav menu inside of a flexbox container which in turn is inside of a flexbox container as well:
When I resize the window the menu stacks instead of the horizontal line getting shorter. How can I fix it? ( I want menu to stay intact and the line to be the one shrinking)
#menu_container { display: flex; justify-content: right; border-style: solid; border-color: #ffffff; border-width: 0px; padding-bottom: 1em;}#menu_align { display: flex; justify-content: flex-end; width: 50%;}#line_horizontal { height: 2px; margin-top: 30px; width: 100%; background: rgba(0, 0, 0, 0.50);}#nav { border-style: solid; border-color: #000; width: 590px; font-size: 0.9em; margin-right: 9em; margin-left: 0em; background-color: rgba(0, 0, 0, 0.1); border-left: solid 1px #000; border-right: solid 1px #000;}#nav ul { list-style: none; padding-left: 0em;}#nav ul li { float: right; padding: 0.5em;}<div id="wrapper"><div id="header"><div id="menu_container"><!--(flex container)100% of horizontal space across the screen--><div id="menu_align"><!--(flex container)50% of horizontal space.Right half of the screen--><div id="line_horizontal"></div><nav id="nav"><ul><li><a href="#">About</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul></nav></div></div><div id="logo"> </div></div></div>