title: Hyperlink a collection of <div> elements
body: <p>When I try to hyperlink the code below, it seems to mess with the wrapping of the image and only links the icon rather than the whole flex-container. I've tried experimenting with <code>&lt;span&gt;</code> elements but haven't had any success.  </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>.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    transition: opacity .2s ease-in-out;
    flex-wrap: nowrap
  }
  
  .flex-item {
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: verdana;
    width: 100%;
    display: flex;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    z-index: 10;
    flex-wrap: nowrap
  }
  
  .flex-item:before {
    content: '';
    float: left;
    padding-top: 100%;
  }
  
  .red-box {
    background: #fd6f71;
    transition: opacity .2s ease-in-out;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="red-box flex-item"&gt;
      &lt;div class="lh-icon"&gt;&lt;img src="https://i.imgur.com/NCp8Sst.png"&gt;&lt;/div&gt;
      &lt;a&gt;Placeholder&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Codepen:</p>
  
  <p><a href="https://codepen.io/adms2000/pen/LYVpaBB" rel="nofollow noreferrer">https://codepen.io/adms2000/pen/LYVpaBB</a></p>