Flex-box悬停的孩子全高

Question

我正在尝试做一个网格镜头，看门人将在顶部和底部，当用户徘徊在两侧时，都会有一个灰色区域。

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

我的进度很好，但悬停存在问题，它不会填充其余的空间。

演示https://jsfiddle.net/xqqq0wpes/1/

Answer 1

有了一点修改 - 在.control-wrap上只需管理子元素的流(.caret-wrap(，而在子元素(.caret-wrap(上控制着看护人的位置。

.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

您需要从 .control-wrap中删除 align-items: center;和 justify-content: space-evenly;，然后将 flex: 1 1 auto;， align-items: center;， justify-content: center;添加到 .caret-wrap中，以便子项目获得完整的宽度，可用高度，可用的高度，caret将在中心对齐。。这是您更新的小提琴https://jsfiddle.net/xqqq0wpes/10/

这是您更新的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

我没有看到 flexbox 的任何需要...您可以在没有flexbox的情况下完成。

对于符号，尝试在这里使用HTML实体而不是直接符号

* {
  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>