Our current layout is as follows:
https://i.sstatic.net/u6Qi9.png
The layout displays the list (blue container) aligned at the top, but we require it to be aligned at the bottom. To achieve this, we set the container (orange) to be a flex container and then set the red container to flex: 1. However, this solution does not work in Safari.
The scss code is as follows:
.orange-container {
display: flex;
flex-direction: column;
.red-container {
flex: 1;
}
.blue-container {
// No modifications
}
}
In Safari, when the list expands, it overlaps the red container and the container above it (white box).
We have attempted adding the -webkit vendor prefix to the flex properties, but it did not resolve the issue.
I have created a GitHub repository to demonstrate the problem.
Any suggestions on what might be causing this issue?