flex-box hover child full height

Question

I'm trying to do a grid caret, the caret will be on top and bottom, and when user hover on each side there will be a grey area.

<div class="control-wrap">
  <div class="caret-wrap">
    <span class="caret">▲</span>
  </div>

  <div class="caret-wrap">
    <span class="caret">▼</span>
  </div>
</div>

My progress is good but there's an issue with the hover, it doesn't fill the rest of the space around.

Demo https://jsfiddle.net/xqq0wpes/1/

Answer 1

With a little modification - on the .control-wrap just manage the flow of the child elements ( .caret-wrap ), and on the child elements( .caret-wrap ) control the caret's position.

 .control-wrap { display: flex; flex-direction: column; width: 20px; height: 30px; margin: 0px 10px; border: 1px solid; } .caret-wrap { display: flex; justify-content: center; align-items: center; flex-grow: 1; cursor: pointer; font-size: 8px; } .caret-wrap:hover { background: #ddd; } .caret-wrap:active { color: grey; } 

 <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div> <div class="caret-wrap"> <span class="caret">▼</span> </div> </div> 

JSFiddle

Answer 2

you need to remove align-items: center; and justify-content: space-evenly; from the .control-wrap and add flex: 1 1 auto; , align-items: center; , justify-content: center; to the .caret-wrap so that child item get the full width and available height and caret will get aligned in the center. Here is your updated fiddle https://jsfiddle.net/xqq0wpes/10/

Here is your updated CSS

.control-wrap {
  width: 20px;
  /* align-items: center; */
  display: flex;
  flex-flow: column;
  margin: 0px 10px;
  border: 1px solid;
  height: 30px;
  /* justify-content: space-evenly; */
  .caret-wrap {
    cursor: pointer;
    font-size: 8px;
    padding-left: 2px;
    padding-right: 2px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      background: #ddd;
    }
    &:active {
      color: grey;
    }
  }
}

Answer 3

I don't see any need of Flexbox here...You can do it without flexbox.

Also for symbols try to use html entities here instead of direct symbol

 * { box-sizing: border-box; } .control-wrap { width: 20px; margin: 0px 10px; border: 1px solid; height: 30px; } .caret-wrap { cursor: pointer; font-size: 8px; height: 50%; text-align: center; padding: 2px; background: red; } .caret-wrap:hover { background: #ddd; } .caret-wrap:active { color: grey; } 

 <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">&#9650;</span> </div> <div class="caret-wrap"> <span class="caret">&#9660;</span> </div> </div>