Javascript 如何根据容器高度和宽度拉伸内容图标跨度元素的50%宽度和100%高度

我有一个低于html的结构。容器具有一定的动态高度和宽度。基于容器，fonticon1和fonticon2拆分宽度并占据100%高度

.fonticon1，
fonticon2先生{
显示：内联块；
对齐项目：拉伸；
最小高度：100%；
最小宽度：50%；
字体大小：16px；
}
.icon1：之前，
fonticon2：之前{
内容：'\e34c'；
线高：1；
}

放在

容器上

，使其块级子级并排对齐

将子项设置为

display:block，
高度：100%和
宽度：50%

下面是演示。为了演示，我添加了一些必要的样式<代码>容器
用红色边框表示，子容器用黑色边框表示


.container{
显示器：flex；
}
fonticon1先生，
fonticon2先生{
显示：块；
宽度：50%；
身高：100%；
}
/*不必要的演示材料*/
.container{边框：1px实心红色；高度：50px；}
.fonticon1、.fonticon2{边框：1px纯黑色；框大小：边框框；}
使用容器作为显示：块；如果没有弹性，你可以
浮动：在.fonticon1、.fonticon2中左移，这将把你的跨度分成2个区块


.container{
宽度：100%；
显示：块；
边框：1px#ddd实心；
溢出：隐藏；
}
fonticon1先生，
fonticon2先生{
最小高度：100%；
最小宽度：50%；
字体大小：16px；
浮动：左；
}
.icon1：之前，
fonticon2：之前{
内容：'\e34c'；
线高：1；
}