How to show overflow content as full in a div - html

Question

So I have this middle container (div) which consists of 2 smaller div.
Here's the code for the div that wraps both div:
.midContainer{
width: 100%;
height: 30vh;
max-height: 700px;
display: flex;
flex-wrap: wrap;
overflow: auto;
justify-content: space-between;
margin-bottom: 15px;
}
Here's the code for left div:
.tokenInfoBox{
width: 60%;
height: 100%;
max-height: 700px;
// padding: 20px 30px ;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
Here's the code for right div:
.ticketBox{
width: 40%;
height : 100%;
background-color: #0e0304;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
}
Have this added as well:
#media only screen and (max-width: 1060px) {
.tokenInfoBox, .ticketBox {
width: 100%;
}
}
So the content for the left div and right div (both div) display normally in big screen but overflow and overlap div below them in small screen. How do I wrap all the overflow content inside the div?
Here's the image in bigger screen and here's the image in smaller screen where I have to scroll to see all content.

Answer 1

CSS:
.midContainer {
width: 100%;
height: 30vh;
display: flex;
flex-wrap: wrap;
}
.tokenInfoBox {
flex: 1 1 25rem;
height: 100%;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
.ticketBox {
flex: 1 1 8rem;
height: 100%;
background-color: #0e0304;
border-radius: 0 10px 10px 0;
}
you can use flex in this case when applying flex-wrap.

Answer 2

If i understood well, the problem is because you have set the height of the .midContainer, try something like this:
.midContainer {
display: flex;
width: 100%;
align-self: flex-start;
}
.tokenInfoBox {
width: 60%;
flex-grow: 1;
display: flex;
flex-direction: column;
background: #1b1b1c;
}
.ticketBox {
flex-grow: 1;
display: flex;
flex-direction: column;
background: #0e0304;
width: 40%;
}
this will grow you div to fit the amount of height needed.
Also think about the use of media queries, small devices would be difficult to read 2 divs side by side, maybe should be better one over another
#media (max-width: 768px) {
.midContainer {
flex-direction: column;
}
.tokenInfoBox {
width: 100%;
}
.ticketBox {
width: 100%;
}
}
also I strongly recommend to use tailwind