Как решить проблему зависания при использовании flex

Question

Я использую flex при наведении на href, чем изменение цвета на красный, но я использую flex one div, но когда я устанавливаю margin-bottom: 50px;на кнопку, но я не знаю, также увеличение высоты href и зависание от тега, я хочу только навести курсор на текст тега, а не на внешнюю часть, и мне нужна кнопка только для маржи.Спасибо

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

Answer 1

просто так.set "align-items: flex-start;"

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  align-items:flex-start;
}
button {
  margin-right: 16px;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

Answer 2

Настройте выравнивание на flex-start, чтобы избежать растяжения тега a:

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  align-items:flex-start; /*Added this*/
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

Вы также можете добавить margin-bottom:auto к a

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom:auto; /*Added this*/
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>