Cannot get css hover to action-CodePudding

I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.

HTML:

<div >
  <div  />
</div>

CSS:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 0;
  background: black;
  transition: max-height 2s ease-out;
  overflow: hidden;
}

.container:hover .inner {
  max-height: 200px;
}

CodePudding user response：

As mentioned by Temani Afif, this was nothing more than missing a height.

CodePudding user response：

 <div >
    <div >
  </div> you added an extra slash