title: CSS keep menu in container and expand background to full screen
body: <p>The picture below shows what I would like to get.</p>
  
  <p>It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves @media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.</p>
  
  <p>Here is a jsFiddle with a basic setup, which does NOT what I want:
  <a href="https://jsfiddle.net/n3jmyq2f/3/" rel="nofollow noreferrer">https://jsfiddle.net/n3jmyq2f/3/</a> (Edited, was not the final version)</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="menu_wrap"&gt;
          &lt;div class="menu_bg"&gt;&lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;It's me, Mario!&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      width:50%;
      margin: 0 auto;
      background:lightgreen;
      height:300px;
  }
  .menu_bg{
      position: absolute;
      background: #afafaf;
      width: 100%;
      left:0;
      height:30px;
      z-index: -1;
  }
  ul {
      height:30px;
      background: #afafaf;
  }
  
  li {
      display:inline-block;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Q19EV.jpg" alt="css menu with background"></p>