title: Set the percentage dimension of two wrapped flexbox elements
body: <p>I'm exercising about flexbox and I would create a simple layout. But I have some difficulties as can be seen from the code. I want split the content (the two sections in the code) in two parts: 30% and 70%   but the flexbox instruction doesn't accomplish this.  Why? How can I fix it?</p>
  
  <p><a href="https://jsfiddle.net/6mg0tcah/" rel="nofollow noreferrer">Code on JSFiddle</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Flex Layout&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
          body,html{
              margin:0px;
              padding:0px;
              box-sizing:border-box;  
          }
  
          .container{
              display: flex;
              flex-wrap: wrap;
  
          }
  
          .mainheader{
              flex:100%;
              padding:35px 0;
              color:white;
              text-align: center;
              background-color: rgb(50,180,200);
  
          }
  
          nav{
              background-color: black;
              flex:100%;
  
          }
  
          ul.navbar{
              list-style:none;
              overflow: hidden;
              margin:0;
              padding:0;
          }
  
          ul.navbar &gt; li{
  
              float:left;
              text-align:center;
          }
  
          ul.navbar  a:hover{
              color:black;
              background-color:white;
          }
  
          .navbar a{
              display:block;
              text-decoration:none;
              color:white;
              padding:15px;
              font-size:large;
          }
  
  
  
              .side{
              flex:30%;
              padding:10px;
              border:thin solid black;
          }
  
          .content{
              flex:70%;
              }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
  
          &lt;header class="mainheader"&gt;
              &lt;h1&gt;My Website&lt;/h1&gt;
              &lt;p&gt;With a flexible layout&lt;/p&gt;
          &lt;/header&gt;
  
          &lt;nav&gt;
              &lt;ul class="navbar"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
  
          &lt;section class="side"&gt;
              &lt;header&gt;
                  &lt;h1&gt;About me&lt;/h1&gt;
              &lt;/header&gt;
              &lt;h4&gt;
                  Photo of me
              &lt;/h4&gt;
  
          &lt;/section&gt;
  
          &lt;section class="content"&gt;
          Lorem ipsum
          &lt;/section&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>