title: vuetify v-flex xs12 only fill half the width
body: <p>I am trying to make list of cards using vuetify v-flex here is the code</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div id=&quot;app&quot;&gt;
      &lt;v-app&gt;
      &lt;v-content&gt;
          &lt;v-container fill-height fluid&gt;
          &lt;v-layout&gt;
              
              &lt;v-flex xs12&gt;
              &lt;v-card dark color=&quot;grey&quot;&gt;
                  &lt;v-card-title&gt;
                  &lt;div&gt;
                      &lt;h2&gt;Top Questions&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;/v-card-title&gt;
              &lt;/v-card&gt;
              &lt;/v-flex&gt;
              
              &lt;v-flex xs12&gt;
              &lt;v-card v-for=&quot;item in items&quot; :key=&quot;item._id&quot;&gt;
                  &lt;v-card-title&gt;
                  &lt;h3&gt;{{ item.title }}&lt;/h3&gt;
                  &lt;p&gt;{{ item.content }}&lt;/p&gt;
                  &lt;/v-card-title&gt;
              &lt;/v-card&gt;
              &lt;/v-flex&gt;
          &lt;/v-layout&gt;        
          &lt;/v-container&gt;
      &lt;/v-content&gt;
      &lt;/v-app&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>I am expecting each <code>v-flex</code> will fill 100% of the row. However, they only filled half of it.<br />
  <a href="https://codepen.io/anon/pen/mKBMEW" rel="nofollow noreferrer">https://codepen.io/anon/pen/mKBMEW</a></p>
  <p>I can, however, add prop <code>d-inline-block</code> at v-layout. I am just curious about what happened with my first code before.</p>