css - Flexbox children 并不总是扩展到他们可以/应该的那么宽

Question

我的 nav 中的两个链接按钮的名称很长，并且它们是文本换行并变成两行高，尽管(据我所知)没有什么可以阻止它们或 nav 变宽。我是不是错过了什么？

代码很长，所以您可能会更喜欢查看 codepen比在这里阅读。之所以这么长，是因为我担心我在全局样式中忽略了某些东西，或者我的媒体查询更改是导致此错误的原因。

编辑:这是一个简单的答案。我误解了选择器的优先级。我认为媒体查询优先于一切(内联除外)。所以我没有意识到我的媒体查询中的 nav a 规则没有覆盖我的基本 CSS 中的 nav > section > a。关于始终尊重 CSS 选择器优先级的好教训。

HTML

<section>
    <nav>
        <a id="NSFW_deactivateFilter" onClick="worksafeOff()" href="#">Worksafe Mode: On</a>
        <h2 onClick="showMenu()">Category Filters</h2>
        <div></div>
        <section id="nav_Orientation">
              <a id="Horizontals" href="#">Horizontals</a>
              <a id="Verticals" href="#">Verticals</a>
        </section>
        <div></div>
        <section id="nav_Category">
              <a id="Biltmore" href="#">Biltmore</a>
              <a id="Commercial" href="#">Commercial / Product</a>
              <a id="Fashion" href="#">Fashion &amp; Glamour</a>
              <a id="Invocation" href="#">Invocation</a>
              <a id="NewOrleans" href="#">New Orleans</a>
        </section>
    </nav>
</section>

CSS

/** GLOBAL **/
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: 400;
    line-height: 1em;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 1;
}
a {
    text-decoration: underline;
}
body {
    background-color: #444;
    color: #ccc;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
}
body > section {
    background-color: #333;
    width: 100%;
    max-width: 1440px;
}

/** NAV **/
nav {
    align-items: center;
    background-color: #222;
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 10px;
    width: 95%;
    max-width: 480px;
}
nav a, nav > h2 {
    border: 1px solid #666;
    margin: 0 0 5px 0;
    padding: 5px;
}
nav a {
    text-decoration: none;
}
nav > a, nav > h2 {
    width: 100%;
}
nav > a {
    background-color: #666;
}
nav > div {
    display: none;
}
nav > section { 
    align-items: center;
    display: none;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0;
    width: 95%;
}
nav > section.nav {
    display: flex;
}
nav > section > a {
    display: inline-block;
    width: 48%;
}


/** MEDIA QUERIES **/
@media (min-width: 1000px) {
    nav {
        display: inline-flex;
        flex-flow: row nowrap;
        width: auto;
        max-width: none;
    }
    nav a {
        margin: 0 5px;
        width: auto;
    }
    nav > h2 {
        display: none;
    }
    nav > div {
        background-color: #666;
        display: block;
        height: 20px;
        margin: 0 5px;
        width:1px;
    }
    nav > section { 
        display: flex;
        flex-flow: row nowrap;
        width: auto;
    }
}

Answer 1

从 nav> section > a 中删除 width: 48%; 规则。

参见 codepen .