title: How do I give a flex item 100% width?
body: <p>I am practicing responsive web design, and using flex.</p>
  
  <p>The problem is, I want to make the width of the .menu li 100% when the screen is smaller than 768px, so I tried to give .menu ul and .menu li width: 100%. But it doesn't work. I also tried flex: 0 0 100% but nothing happened.</p>
  
  <p>How do I make the .menu li 100%?    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  nav ul,
  .outline ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  
  /*common*/
  
  
  /*layout*/
  
  .container {
    max-width: 900px;
    margin: 0;
  }
  
  .outline {
    flex: 2;
  }
  
  section {
    flex: 7;
  }
  
  
  /*header*/
  
  header {
    display: flex;
  }
  
  .login ul,
  .menu ul {
    display: flex;
  }
  
  .login ul {
    justify-content: flex-end;
  }
  
  .toparea {
    margin-left: auto;
  }
  
  
  /*section*/
  
  .contents {
    display: flex;
  }
  
  
  /*media query*/
  
  @media only screen and (max-width: 768px) {
    body {
      background-color: #EAC0F0;
    }
    header {
      flex-direction: column;
    }
    .logo {
      justify-content: center;
    }
    .login {
      display: none;
    }
    .menu ul {
      flex-direction: column;
    }
    .contents {
      flex-direction: column;
    }
    .outline ul {
      display: flex;
    }
    .outline li {
      flex: 1;
    }
  }
  
  
  /*footer*/
  
  
  /*temp*/
  
  img,
  .login ul,
  .menu ul,
  .outline li {
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;RWD&lt;/title&gt;
    &lt;link rel="stylesheet" href="./rwd.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;header&gt;
        &lt;img src="" alt="logo"&gt;
        &lt;div class="toparea"&gt;
          &lt;nav class="login"&gt;
            &lt;ul&gt;
              &lt;li&gt;Login&lt;/li&gt;
              &lt;li&gt;Help&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;nav class="menu"&gt;
            &lt;ul&gt;
              &lt;li&gt;Menu1&lt;/li&gt;
              &lt;li&gt;Menu2&lt;/li&gt;
              &lt;li&gt;Menu3&lt;/li&gt;
              &lt;li&gt;Menu4&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="contents"&gt;
        &lt;div class="outline"&gt;
          &lt;ul&gt;
            &lt;li&gt;Outline1-1&lt;/li&gt;
            &lt;li&gt;Outline1-2&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;section&gt;
          &lt;h1&gt;heading&lt;/h1&gt;
          &lt;p&gt;paragraph&lt;/p&gt;
        &lt;/section&gt;
      &lt;/div&gt;
      &lt;footer&gt;
        &lt;address&gt;Contact : email@email.com&lt;/address&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>