Currently, I use Flex wrap to give a space when moving to the next line. However, if the height of first becomes longer, the height of the first flex wrap line does not become longer.
<div class="parent"><div class="unique-wrapper"><div class="unique_element">First</div></div><div class="child-wrapper"><div class="child">Second</div><div class="child">Third</div><div class="child">Fourth</div><div class="child">Fifth</div></div></div>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;}When increasing the height
As the height of first increases, the length of second and third must also increase, but in the current code, only first is longer. I searched and found that there is a way to add a hidden element, but I cannot give a classname to a specific element using data.map. What should I do?
the result I want
I would like to know what work is needed to make it look like the image above.