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

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.

CodePudding user response：

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.

CodePudding user response：

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