I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows but not for columns when the body class is changed accordingly. Any suggestions on how I can achieve this?
body.row #parent {
display: flex;
flex-flow: wrap row;
width: min-content;
}
body.row .child {
display: flex;
flex-direction: row;
border: 1px solid red;
width: max-content;
}
body.column #parent {
display: flex;
flex-flow: wrap column;
height: min-content;
}
body.column .child {
display: flex;
flex-direction: column;
border: 1px solid red;
height: max-content;
width: max-content;
}
1. Line
2. Line
1. Line
2. Line
1. Line
2. Line
1. Line
2. Line
3. Line
4. Line
5. Line
6. Line
7. Line
8. Line
1. Line
2. Line
1. Line
2. Line