CSS: Safari's bug with flex boxes and generated content

Safari has a problem with CSS generated content applied to flex boxes.

Given the following code:

section {
    height: 150px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}

section:before {
    content: "";
    display: table;
}

div {
    width: 50%;
    height: 100%;
    background-color: green;
}

Using CSS generated content with the :before pseudo-element simply breaks the grid created with flex boxes.

Test case