Как добавить границу между двумя гибкими элементами? ⇐ CSS

[Anonymous]

Я пытаюсь добавить границу между двумя гибкими элементами строк, однако всякий раз, когда я добавляю один, гибкие элементы остаются друг над другом, а не рядом друг с другом, вот пример:
Вот как я хочу, чтобы это выглядело. (линия нарисована краской, а не настоящая)

https://i.sstatic.net/M6PQW26p.png
Это что я получаю.

https://i.sstatic.net/JkcXXx2C.png



Flex content

Flex content




.flex-container {
display: flex;
overflow: hidden;
flex-flow: row wrap;
height: 100vh;
.flex-item1 {
flex: 1 50%;
background-color: aqua;
border: 1px solid black;
}
.flex-item2 {
flex: 1 50%;
background-color: white;
}
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... flex-items