Как растянуть на 50% ширину и 100% высоту элемента span значка содержимого в зависимости от высоты и ширины контейнера

Question

У меня есть структура HTML ниже.Контейнер имеет некоторую динамическую высоту и ширину.На основе контейнера fonticon1 и fonticon2 разделите ширину и займите 100% высоты.

.fonticon1,
.fonticon2 {
  display: inline-block;
  align-items: stretch;
  min-height: 100%;
  min-width: 50%;
  font-size: 16px;
}

.icon1:before,
.fonticon2:before {
  content: '\e34c';
  line-height: 1;
}

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>

Answer 1

Использовать контейнер как дисплей: блок;и без flex вы можете поместить float: left в .fonticon1, .fonticon2, это разделит ваш диапазон на 2 блока

.container {
  width: 100%;
display: block;
border: 1px #ddd solid;
overflow: hidden;
}

.fonticon1,
.fonticon2 {
  min-height: 100%;
  min-width: 50%;
  font-size: 16px;
float: left;
}

.icon1:before,
.fonticon2:before {
  content: '\e34c';
  line-height: 1;
}

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>

Answer 2

Поместите display: flex; на container, чтобы его дочерние элементы выравнивались на одном уровне.

Установите дочерние элементы на display: block;, height: 100%; и width: 50%;.

Демонстрация ниже.Я добавил некоторые необходимые стили для демонстрационных целей.Container обозначается красной рамкой, а дети - черными.

.container {
  display: flex;
}

.fonticon1,
.fonticon2 {
  display: block;
  width: 50%;
  height: 100%;
}

/* UNNECESSARY DEMO STUFF */
.container { border: 1px solid red; height: 50px; }
.fonticon1, .fonticon2 { border: 1px solid black; box-sizing: border-box; }

<span class="container">
    <span class="fonticon1">
        <span class="icon1"></span>
    </span>
    <span class="fonticon2"></span>
</span>