My Problem is, that I want to have two divs next to each other inside a container and the height is dictated by the second/right div. My thought was to have a container with those two divs.
- Left gets 100% height of its container (never grows larger than the available space)
- Right grows as much as it wants/needs to fit its content (auto)
- through which the container grows through which left grows.
How can I achieve this?
This codepen gives the structure and shows that my solution obviously doesn't work. Maybe display:flex is the problem? Should I use grid? Do I need any of this? How can this be done?
.wrapper {
display: flex;
background-color: #338811;
}
.left {
width: 50%;
height: 100%;
background-color: #888833;
}
.right {
width: 50%;
height: auto;
background-color: #885588;
}