Почему абсолютно позиционированный псевдоэлемент вмешивается в расчет space-between?

Question

[Андрей Федоров]

Почти уверен что я где-то ступил, а где не могу понять. codepen.io/aliencash/pen/EZKERe?editors=1100#0
В примере в первом блоке у .wrapper есть ::after. Во втором его нет. Как сделать чтобы был, но чтобы space-between расчитывался правильно, как во втором блоке.
Конечно вешать ::after на .item:last-child - это не вариант.



UP: Додумался посмотреть в разных браузера. В хроме и опере этого глюка нет, есть в ie и firefox.

Answer 1

[Андрей]

Не изящно, но работает

<div class="wrapper">
  <div class="kastyl">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div> 
</div>

.wrapper {
  position: relative;
  width: 400px;
  border: 1em solid green;
  box-sizing: border-box;
  margin-bottom: 1em;
}

.kastyl {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Comments

[Андрей Федоров]

На стеке пишут, что это известный баг firefox.

[Андрей]

Андрей Федоров: Да похоже, что это просто ошибка, а не особенность :)

Answer 2

[sleepyKitty]

А с чего вы взяли что он вмешивается куда-то? Красный квадрат просто перекрывает часть синего прямоугольника. Сделайте z-index последнему элементу и увидите

Comments

[Андрей Федоров]

Ничего подобного. Поправил немного код - codepen.io/aliencash/pen/EZKERe?editors=1100#0
На мой взгляд, в первом блоке все синие блоки должны распределятся равномерно по родителю. Тем не менее этому мешает псевдоэлемент.

[sleepyKitty]

Ничему он мешает...Открой хоть девтулз и посмотри ширину элементов, она у всех одинаковая.
Он просто перекрывает последний элемент и его не видно (что логично). Детский сад, ей богу.

[Андрей Федоров]

sleepyKitty: Дорогой друг, вы знаете как у flex блока должно работать свойство justify-content: space-between? Первый блок с зеленой обводкой должен выглядеть так же как второй. Но этому препятствует наличие у него псевдоэлемента. По существу что-то можете сказать?

[sleepyKitty]

Ты тролль? Они и выглядят одинаково. Не ну если тебе 5 лет или ты аутист и вместо одинаковых блоков видишь единорогов, то я тут не помогу конечно.

[Андрей Федоров]

sleepyKitty: Додумался посмотреть в разных браузера. В хроме и опере этого глюка нет, есть в ie и firefox. Лол. )))

[Никита Кит]

Андрей Федоров: вообще-то sleepyKitty прав. Псевдоэлемент на флексбокс никак не влияет - он просто висит сверху. Добавь .item{position: relative; z-index:11} и .item встанет выше своего псевдоэлемента.

[Никита Кит]

Андрей Федоров: В хроме и опере этого глюка нет, потому что они поддерживают space between без префиксов, а ie и firefox с префиксами

[Андрей Федоров]

Никита Кит: не в том вопрос. мне не важно кто из них выше. важно что у меня в firefox неправильно рассчитывается распределение по flex-блоку дочерних элементов. вот с этим я борюсь.

ps: вы вероятно невнимательно ознакомились с вопросом и кодом. у блоков .item псевдоэлементы не заданы. у первого блока .wraper есть элемент ::after.

[Андрей Федоров]

Никита Кит: Неверно. Посмотрите мой код наконец. Там подключен reset.css и автопрефиксер. К тому же согласно caniuse.com ff полноценно, без префиксов, поддерживает flex с марта 2014 года.

[Никита Кит]

Андрей Федоров: "важно что у меня в firefox неправильно рассчитывается распределение по flex-блоку дочерних элементов. вот с этим я борюсь."
Борись))) Удачи

[Андрей Федоров]

Никита Кит: Слабак. ;)