Как сделать бордер во всю высоту независимо от контента?

Question

[Antonio09]

https://jsfiddle.net/os7uewg0/

Comments

[Ankhena]

Если на всю высоту, так и задавайте border, а не лишние псевдо с абсолютами.
И уточните на всю высоту кого.

[Antonio09]

Ankhena, на всю высоту features__box

вот я пробую бордером
но оно учитывает и маргин у features__item почему то
https://jsfiddle.net/os7uewg0/1/

[Ankhena]

Antonio09,

вот я пробую бордером

Ну прекрасно. border всегда на всю высоту элемента.
Что значит учитывает чужой margin? Если margin убрать ничего не изменится (для высоты бордера).

p.s. width: calc(100% / 4); Просто 25% не написать? Зачем заставлять считать браузер при каждой загрузке страницы?

p.p.s. разъясните мне, Antonio09 и olya_097 это одно лицо?

[Antonio09]

Ankhena, https://jsfiddle.net/xsp9ya1q/
вот я убираю .features__box{
height: 100%;}
но результат еще хуже

p.s. насчет width: calc(100% / 4);
так вроде для браузера это мелочь сейчас
разве нет?

p.p.s. не совсем так. Просто знакомы хорошо

[Ankhena]

Antonio09,

вот я убираю .features__box{
height: 100%;}
но результат еще хуже

Логично.
100% это высота родителя. Но в родителе есть еще что-то, поэтому выходит дичь.
Значит, нужен flex и flex-grow.

так вроде для браузера это мелочь сейчас
разве нет?

Пройти метр вроде мелочь. Но если таких мелочей 60 тысяч, то это уже 60км. Кто-то пройдет, кто-то даже пробежит, а кто-то нет.
Зачем делать лишнее и уродское?

[Antonio09]

Ankhena, не совсем понял
можете подсказать, пожалуйста, что куда писать? как я понял нужно flex: 1
пробую - ничего не меняется

[Ankhena]

Antonio09, https://jsfiddle.net/7qf39bs8/ цвета, чтобы вам понято было

[Antonio09]

Ankhena, спасибо огромное!
теперь все стало понятно

[Ankhena]

Antonio09, отлично!

Answer 1

[EgoryKH]

.features__box {
height:100%;
}

Comments

[Antonio09]

EgoryKH, так оно растягивается на весь features__item
а нужно только features__box

[EgoryKH]

Antonio09,

.features__item {
  width: calc(100% / 4);
  padding: 0 40px;
  margin-bottom: 45px;

  border-right:1px solid red;

}

[Antonio09]

EgoryKH, понял
но бордер так же возле иконки теперь
а он там не нужен