flex: how to prevent wrap for some elements?-CodePudding

I have a <header> element which is "flexed", inside it I have several elements:
some are dynamically filled and sized. some have a fixed size.

the desired layout is with div nav always on the same row (as below), but it always wraps the nav to the next line.

-header---------------
| h1                 |
----------------------
| div |  nav links   |
|     | [a][a][aaa]  |
|     | [aaaa][aaaa] |
|     | [a][aa][....]|
----------------------
| h2                 |
----------------------

while:
h1 = width 100%
div = width 100px, height =? (contains unknown height image) nav = width&height unknown (based on some dynamic unknown number of links)

code:

header {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  flex: 0 0 100%;
}

div {
  flex: 0 0 100px;
}

nav {
  flex: 1 1 content;
  display: inline-flex;
  flex-wrap: wrap;
}

a {
  flex: 1 1 110px;
}

<header>
  <h1>lorem</h1>
  <div></div>
  <nav>
    <a>lorem</a><a>lorem</a><a>lorem</a><a>lorem</a><a>lorem</a>
    <!-- usually 40-50 links with unknown string -->
  </nav>
  </header>

CodePudding user response：

Your code works fine, make sure to change <headr> to <header>, the typo prevents the site from rendering the CSS properly.

CodePudding user response：

Whether use grid for that or create two flex containers, one that wraps elements and the second doesn't.