title: Stop flex child from being full width
body: <p>I've created a row of items and made their heights match using flex. However this is causing my link within the items to become full width, when I just want it to be an automatic width. I've tried setting it to <code>display: inline-block</code> but this hasn't fixed it.</p>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/v0o2z9g3/2/" rel="noreferrer">https://jsfiddle.net/v0o2z9g3/2/</a></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>.row {
    display: flex;
    flex-direction: row; }
  
    .col {
      display: flex;
      flex-direction: column;
      padding: 0 0 15px 0;
      margin: 0 19px 65px;
      width: calc((100% / 3) - 38px);
      background: red; }
      .col .resource-item__title {
        font-weight: bolder; }
        .col .resource-item__summary {
          margin: 0 0 5px 0; }
          .col .resource-item__link {
            display: inline-block;
            background: yellow;
            margin-top: auto; }
            .col .resource-item__icon {
              display: inline-block;
              vertical-align: middle;
              margin-right: 5px;
              color: green;
              font-size: 22px;
              cursor: default; }
              .col .resource-item__icon.disabledIcon {
                color: red; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col"&gt;
      &lt;h4 class="resource-item__title"&gt;Shale Gas Briefing Final&lt;/h4&gt;
      &lt;p class="resource-item__summary"&gt;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...&lt;/p&gt;
      &lt;a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed"&gt;view&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;h4 class="resource-item__title"&gt;Shale Gas Briefing Final&lt;/h4&gt;
      &lt;p class="resource-item__summary"&gt;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...&lt;/p&gt;
      &lt;a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed"&gt;Download&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;h4 class="resource-item__title"&gt;Shale Gas Briefing Final&lt;/h4&gt;
      &lt;p class="resource-item__summary"&gt;Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...&lt;/p&gt;
      &lt;a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed"&gt;Download&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I basically require the yellow block to end where the the text ends, rather than stretching to the container edges.</p>
  
  <p>Thanks</p>