Почему высота span не такая как у родителя при height:100%?

Question

[serioer]

Привет у меня есть переключатель вкладок, однако я хочу что б высота каждого елемента при включенной вкладке (белом бекгранде) была у всех вкладок одинаковая и не выходила за предел родителя, родитель должен быть как максимальный елемент по высоте
ширина макс контент

https://jsfiddle.net/puq1hwza/1/

<div class="holder">
        <label>
          <input type="radio" name="tab" value="0" />
          <span>Lorem</span>
        </label>
        <label>
          <input type="radio" name="tab" value="1" />
          <span>isput</span>
        </label>
        <label>
          <input type="radio" name="tab" value="2" />
          <span>long text here</span>
        </label>
        <label>
          <input type="radio" name="tab" value="3" />
          <span>dolorsitamet</span>
        </label>
      </div>

body{
  background:blue;
}    
    .holder {
      position: relative;

      border: 1px solid #fff;
      background: black;

      width: max-content;
      height: max-content;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10%;

      label {
        width: max-content;
        height: max-content;
        
        input {
          display: none;
        }

        span {
          color: #fff;
          display: flex;
          
        }
        input[name='tab']:checked ~ span {
          background: #fff;
          color: green;
        }
      }
    }

Comments

[Ankhena]

1. jsfiddle не работает в России. Переложите на codepen.io, если хочется, чтобы мы посмотрели.
2. В приложенном к вопросу коде вообще нет ничего с чего бы спан стал как label и нет ничего с чего бы все label были бы одинаковыми. (label могли бы, если бы вы перестали задавать им высоту)

Выводы:
- Убрать вертикальное центрирование у holder.
- Убрать высоту у label
- Задать высоту 100% для span
- Задать центрирование для span

Answer 1

[mikitachyzhyk]

Ну вот например: