菜单容器宽度错误（如果汉堡菜单打开，从汉堡过渡到扩展模式时变为 100% 宽度）

Question

（编辑，因为我解决了 flexbox 的一个问题和摆弄的另一个问题。只剩下一个问题，再加上一件小事。）

我正在为下拉菜单构建一个带有 CSS 和 vanilla javascript 的菜单，但遇到了一个奇怪的错误。

如果我在浏览器中处于汉堡包模式并单击汉堡包以打开菜单 (.menu__box)，当它打开时我加宽浏览器窗口以切换到扩展模式，“menu__box”变为 100% 宽度，覆盖上标志。它不会自行修复，除非我刷新页面，或缩小浏览器以返回汉堡包模式，关闭汉堡包菜单，然后重新展开浏览器窗口。添加 !important 到 width: auto 对于浏览器版本没有帮助。 （编辑：UGGGH，在 Firefox 中，刷新不会修复它 - 你必须通过取消选中该框来手动完成！）

下面的代码，这里的演示。感谢您的帮助。

注意：我从这里只有汉堡包的菜单开始，对其进行了自定义，然后添加了扩展版本。我真的不明白与汉堡菜单复选框相关的代码及其与让 menu__box 在汉堡模式下滑入和滑出的关系。

（编辑：我也只是注意到我使用的汉堡包图标在前两个栏之间不可点击；也许我应该用其他汉堡包代码替换它。除非有人也想帮我解决这个问题......叹息.)

<nav>

  <div class="logo">
<a class="ourname" href="#">
<img src="http://www.sacredfools.org/images/2d-logo-white-on-black-500px-128x128.png">
SACRED FOOLS</a></div>

    <input id="menu__toggle" type="checkbox">
    <label class="menu__btn" for="menu__toggle">
      <span></span>
    </label>

  <ul class="menu__box">
    <li><a class="menu__item" href="#">TICKETS</a></li>

    <li><a class="menu__item shows__dropbtn" onclick="shows__dropdown()">SHOWS
             <i class="fa-solid fa-caret-down"></i></a>

        <div class="shows__dropdownhider" id="shows__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">All Shows</a>
           <a class="menu__dropdownitem" href="#">Calendar</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Past Productions</a>
        </div></li>

    <li><a class="menu__item more__dropbtn" onclick="more__dropdown()">MORE
             <i class="fa-solid fa-caret-down"></i></a>

        <div class="more__dropdownhider" id="more__dropdowncontainer">
           <a class="menu__dropdownitem" href="#">Directions</a>
           <a class="menu__dropdownitem" href="#">Members & Staff</a>
           <a class="menu__dropdownitem" href="#">Get Involved</a>
           <a class="menu__dropdownitem" href="#">About</a>
           <a class="menu__dropdownitem" href="#">Mission</a>
           <a class="menu__dropdownitem" href="#">Anti-Racism</a>
           <a class="menu__dropdownitem" href="#">EDI</a>
           <a class="menu__dropdownitem" href="#">Education & Outreach</a>
           <a class="menu__dropdownitem" href="#">Press</a>
           <a class="menu__dropdownitem" href="#">Awards</a>
           <a class="menu__dropdownitem" href="#">Contact Us</a>
           <a class="menu__dropdownitem" href="#">Mailing List</a>
           <a class="menu__dropdownitem menu__lastdropdown" href="#">Search</a>
      </div></li>

    <li><a class="menu__item menu__highlight menu__lastitem" href="#">DONATE</a></li>

        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-facebook"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-twitter"></i></a></li>
        <li><a class="menu__item menu__social" href="#"><i class="fa-brands fa-square-instagram"></i></a></li>

        <li class="menu__overflowspacer"></li>

    </ul>
  

</nav>

<div class="menuspacer"></div>

<script>

/* SHOWS Dropdown */

function shows__dropdown() {
  document.getElementById("shows__dropdowncontainer").classList.toggle("shows__dropdownshow");
}

/* MORE Dropdown */

function more__dropdown() {
  document.getElementById("more__dropdowncontainer").classList.toggle("more__dropdownshow");
}

/* Close dropdowns when clicking outside */

window.onclick = function(e) {
  if (!e.target.matches('.shows__dropbtn')) {
  var shows__dropdowncontainer = document.getElementById("shows__dropdowncontainer");
    if (shows__dropdowncontainer.classList.contains('shows__dropdownshow')) {
      shows__dropdowncontainer.classList.remove('shows__dropdownshow');
    }
  }

  if (!e.target.matches('.more__dropbtn')) {
  var more__dropdowncontainer = document.getElementById("more__dropdowncontainer");
    if (more__dropdowncontainer.classList.contains('more__dropdownshow')) {
      more__dropdowncontainer.classList.remove('more__dropdownshow');
    }
  }
}

</script>

nav {background-color: #282828;
     padding: 0; margin: 0;
     position: fixed; top: 0; left: 0;
     width: 100%; z-index: 2;}

nav, .menuspacer {height: 60px}

.logo {color: #ffffff; font-size: 12pt; position: fixed; top: 0; left: 0;
   font-family: 'Montserrat', sans-serif; font-weight: bold; z-index: 3;
   }

.logo img {height: 54px; margin-left: 5px; margin-right: 5px; margin-top: 3px; margin-bottom: 3px;
 vertical-align:middle;}

a.ourname:link, a.ourname:visited, a.ourname:hover, a.ourname:active
 {text-decoration: none; color: #ffffff;}

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  display: block;
  float: right;
  margin-right: 15px;
  margin-top: 27px;
  position: relative;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 4;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  top: 60px;
  left: -100%;
  width: 280px;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  margin: 0px;
  padding-left: 0;
  list-style: none;
  background-color: #282828;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
  overflow: auto;
  z-index: 1;
}
.menu__item {
  display: block; float: none;
  padding: 11px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
  border-top: 1px dotted #ffffff;
}

.menu__dropbox {list-style: none;}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 30px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.shows__dropdownhider, .more__dropdownhider {max-height: 0; overflow: hidden;
   -webkit-transition-duration: .25s;
   -moz-transition-duration: .25s;
   -o-transition-duraton: .25s;
   transition-duration: .25s;}

.shows__dropdownshow, .more__dropdownshow {max-height: 100%;}

.menu__dropbtn {cursor: pointer;}

.menu__lastdropdown {padding-bottom: 11px}

.menu__lastitem {border-bottom: 1px dotted #ffffff;}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {color: #FB0901}

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {background-color: #000000}

.menu__highlight {background-color: #404040}

.menu__social {float: left; border: none; font-size: 20pt}

.menu__social:hover, .menu__social:active {background-color: #282828}

.menu__overflowspacer {height: 120px}

.fa-caret-down {margin: 5px; font-size: 8pt; float: right}



@media (min-width: 768px) {

.menu__btn {display: none}

.menu__box {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: fixed;
  top: 0px;
  right: 0px;
  left: auto;
  width: auto !important;
  height: 60px;
  min-height: auto;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: none;
  overflow: hidden;
  z-index: 3;
  margin: 0;
  transition-duration: 0s;
}

.menu__item {
  float: left;
  padding-left: 15px; padding-right: 15px;
  padding-top: 0px; padding-bottom: 0px;
  margin: 0px;
  color: #ffffff;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;
  border-top: none;
}

.menu__social {font-size: 15pt; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; margin: 0}

.final__social {padding-right: 15pt}

.menu__social:hover, .menu__social:active {background-color: #000000}

.menu__dropdownitem {
  display: block;
  padding-top: 5px;
  padding-left: 11px;
  padding-right: 11px;
  padding-bottom: 5px;
  color: #ffffff;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: none;
  transition-duration: .25s;

}

.shows__dropbtn, .more__dropbtn {position: relative; display: inline-block;}

.shows__dropdownhider, .more__dropdownhider {
  position: fixed; display: block; top: 60px; background-color: #282828;
 }

.menu__item:hover, .menu__item:active,
.menu__dropdownitem:hover, .menu__dropdownitem:active {background-color: #282828}

.menu__lastitem {border-bottom: none;}

.menu__overflowspacer {height: 0px}

.fa-caret-down {margin-left: 5px; font-size: 12pt; float: none;
 padding: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px}

.menu__highlight {background-color: #282828;
   font-family: 'Roboto', sans-serif; font-size: 9pt; font-weight: 500;
   border: 1px solid #ffffff;
   padding: 10px; margin-left: 10px; margin-right: 10px;
   border-radius: 5px;}


.menu__highlight:hover, .menu__highlight:active {background-color: #ffffff; color: #000000;}

.menu__box :nth-child(4) {order: 1;}

}