Search code examples
htmlcssflexboxcss-grid

Make buttons (hyperlink) same-size as child in parent wrapper without width or max-width

I made a codepen example which shows my problem pretty good: https://codepen.io/anon/pen/KGQNrP (Link will open in same window)

I can make as many wrappers as I want to, but the hyperlink itself has to be in the button wrapper. So I think my markup would look like this:

<div class="triggered">
  <div class="button">
    <a href="">Small</a>
  </div>
  <div class="button">
    <a href="">Large Large Large</a>
  </div>
</div>

I tried many things with flex and grid but I just can't get it to work.
I don't want to use width, max-width, table-row or something like this.
Flex or grid would be really nice, at least I'm really intereseted in howto get it done with flex or grid.

Solution

  • Just make the container element inline-block, and the links themselves block …?

    .triggered {
  display: inline-block;
  & .button {
    margin: 1rem 0;

    & a {
      background-color: #000;
      color: #fff;
      padding: 1rem;
      display: block;
    }
  }
}

    https://codepen.io/anon/pen/YJeNxd