flexbox - hover not working for flex-item

Question

I am using flexbox to control the UI of the button.

When I hover the Add new part, the height is not fully covered at all.

But it works when I hover the expand arrow

In App.js

  return (
    <div className="App">
      <div className="media">
        <div className="media__bar media__header">
          <div className="media__header__add">
            <div className="media__header__add__new">
              <AddPhotoAlternateIcon fontSize="small" />
              <span>Add new</span>
            </div>
            <button>
              <ExpandMoreIcon style={{ color: "white" }} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );

css

.App {
  font-family: sans-serif;
  text-align: center;
}

.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.media .media__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1rem;
  padding-left: 1rem;
}

.media .media__header .media__header__add {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: white;
  background-color: #c9356e;
  padding: 0.1rem;
}

.media .media__header .media__header__add span {
  font-size: 0.9rem;
}

.media .media__header .media__header__add button {
  background-color: transparent;
  border: none;
}

.media .media__header .media__header__add button:hover {
  background-color: #ab235a;
}

.media .media__header .media__header__add .media__header__add__new {
  padding-left: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.media .media__header .media__header__add .media__header__add__new:hover {
  cursor: pointer;
  background-color: #ab235a;
}

CodeSandbox:
https://codesandbox.io/s/divine-pond-6zy5s?file=/src/styles.css

Answer 1

You need to have hover on .media__header__add instead of media__header__add__new to achieve what you want.

.media .media__header .media__header__add .media__header__add__new:hover {
  cursor: pointer;
  background-color: #ab235a;
}

The above becomes this,

.media .media__header .media__header__add:hover {
  cursor: pointer;
  background-color: #ab235a;
}

Edit: CodeSandbox: https://codesandbox.io/s/romantic-fast-kjtfl

Answer 2

It's because you are putting hover on the individual child tags (button and div.media__header__add__new).

Fot it to work you have to put the hover on the parent element like this.

.media .media__header .media__header__add:hover {
  cursor: pointer;
  background-color: #ab235a;
}

Now you can remove the hover on:

.media .media__header .media__header__add .media__header__add__new:hover{}

and

.media .media__header .media__header__add button:hover {}