Question: I Use flex when i hover on href than color change with red color but i am using flex one div but when i set margin-bottom: 50px; on button but i dont know also href height increase and hover out of a tag i want only hover on a tag text not a out side part also i need margin only button. Thanks

```css
.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;
}
```

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

Answer: 
Adjust the alignment to `flex-start` to avoid the `a` tag being stretched:

```css
.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;
}
```

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

You can also add `margin-bottom:auto` to `a`

```css
.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;
}
```

```html
<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>
```
just like this.set "align-items:flex-start;"

```css
.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;
}
```

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