Сделать кнопки (гиперссылки) одинаковыми по размеру с дочерними в родительской оболочке без ширины или максимальной ширины

Question

Я сделал пример кода, который показывает мою проблему довольно хорошо: https://codepen.io/anon/pen/KGQNrP (ссылка откроется в том же окне)

Я могу сделать столько оболочек, сколько захочу, но сама гиперссылкадолжен быть в обертке кнопки.Поэтому я думаю, что моя разметка будет выглядеть так:

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

Я пробовал много вещей с помощью flex и grid, но я просто не могу заставить его работать.
Я не хочу использовать ширину,max-width, table-row или что-то в этом роде.
Flex или grid были бы действительно хороши, по крайней мере, я действительно заинтересован в том, как сделать это с помощью flex или grid.

Answer 1

Вы можете сделать .triggered a inline-flex и установить flex-direction на column и сделать тег a display:block;, чтобы он заполнил всю ширину .triggered

.triggered {
  display:inline-flex;
  flex-direction:column;  

  & .button {
    margin: 1rem 0;  

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

Answer 2

Просто сделайте элемент контейнера inline-block, а сами ссылки 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