Как при использовании Flex Wrap высота может быть такой же, как у первой строки до минимальной высоты? ⇐ CSS

[Anonymous]

В настоящее время я использую Flex-перенос, чтобы оставить пробел при переходе к следующей строке. Однако если высота first становится больше, высота первой строки гибкого переноса не увеличивается.

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

First


Second
Third
Fourth
Fifth

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

div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}

.parent {
display: flex;
width: 300px;
}

.unique_element {
background-color: Crimson;
padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
border: none;
margin: 0;
}

.unique-wrapper {
flex: 3;
}

.child-wrapper {
flex: 7;
display: flex;
flex-wrap: wrap;
}

.child {
width: auto;
background-color: Cornflowerblue;
padding: 10px 10px 10px 10px;
}

мой результат
При увеличении высоты

По мере увеличения высоты первого, длина второго и третьего должна также увеличивается, но в текущем коде только first длиннее. Я искал и обнаружил, что есть способ добавить скрытый элемент, но я не могу указать имя класса для конкретного элемента, используя data.map. Что мне делать?
результат, который я хочу

Я хотел бы знать, какая работа нужна, чтобы он выглядел так, как на изображении выше.

Подробнее здесь: https://stackoverflow.com/questions/789 ... -through-m