Html 弹性盒悬停儿童全高

我试图做一个网格插入符号，插入符号将在顶部和底部，当用户悬停在每一侧时，将有一个灰色区域

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

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

▲
▼

我的进步是好的，但是悬停有一个问题，它没有填满周围的空间

---

演示

稍加修改-在

.control wrap

上只需管理子元素（

.caret wrap

）的流，在子元素（

.caret wrap

）上控制插入符号的位置

。控件换行{
显示器：flex；
弯曲方向：立柱；
宽度：20px；
高度：30px；
利润率：0px 10px；
边框：1px实心；
}
.插入符号包装{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性生长：1；
光标：指针；
字号：8px；
}
.插入符号换行：悬停{
背景：ddd；
}
.插入符号换行：活动{
颜色：灰色；
}

▲
▼

您需要删除

对齐项目：居中和
对正内容：间距均匀.control wrap
中选择code>并添加
flex:1自动，
对齐项目：居中，
调整内容：中心到
.caret wrap
以便子项获得全宽和可用高度，并且插入符号将在中心对齐。这是你最新的小提琴

这是你最新的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;
    }
  }
}

我看不出这里有任何Flexbox的需要……你可以不用Flexbox来做

此外，对于符号，请尝试在此处使用html实体，而不是直接符号


*{
框大小：边框框；
}
.控制包{
宽度：20px；
利润率：0px 10px；
边框：1px实心；
高度：30px；
}
.插入符号包装{
光标：指针；
字号：8px；
身高：50%；
文本对齐：居中；
填充：2px；
背景：红色；
}
.插入符号换行：悬停{
背景：ddd；
}
.插入符号换行：活动{
颜色：灰色；
}

▲
▼
看看-这是您想要的吗？