I'm trying to add a border between two row flex items, however whenever I add one, the flex items stay in top of eachother instead of being next to eachother, here is an example:
This is how I want it to look. (line was drawn in paint, not a real thing)
https://i.sstatic.net/M6PQW26p.png
This is what I get.
https://i.sstatic.net/JkcXXx2C.png
<body><div class="flex-container"><div class="flex-item1"><p>Flex content</p></div><div class="flex-item2"><p>Flex content</p></div></div></body>.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; }}