Почему псевдоэлемент ::before занимает место во флексбоксе? ⇐ CSS

[Anonymous]

У меня есть простой пример, где я устанавливаю ::before, чтобы задать оттенок фона. Я делаю это с элементом display: flex. Затем я установил для одного из гибких элементов значение flex: 1. Происходят две вещи, которые мне не нравятся:

• Флекс:1 игнорируется, потому что ::before занимает слишком много места, и
• ::before не имеет полной ширины, как я ожидал при заданной ширине: 100%

Почему это происходит? Есть ли способ заставить flex игнорировать ::before и ::after?

Вот несколько снимков экрана. Я ожидаю, что ширина здесь будет 100% (200 пикселей)

[img]https://i.sstatic.net /C2mcU.png[/img]


И я ожидаю, что этот flex:1 заполнит остальную часть экрана.

Код: Выделить всё

.test {
height: 200px;
width: 200px;
display: flex;
flex-direction: row-reverse;
}

.first {
background-color: green;
}

.second {
background-color: grey;
flex: 1;
}

body {
background-color: purple;
}

.test::before {
background-color: yellow;
content: "";
height: 100%;
width: 100%;
display: inline-block;
opacity: 0.04;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/594 ... in-flexbox