如何将溢出内容显示到div中

Question

所以我有这个middle container (div) ，它由 2 个smaller div 。
这是包装两个div的div代码：

.midContainer{
    width: 100%;
    height: 30vh;
    max-height: 700px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: space-between;
    margin-bottom: 15px;
}

这是left div的代码：

.tokenInfoBox{
    width: 60%;
    height: 100%;
    max-height: 700px;
    // padding: 20px 30px ;
    background-color: #1b1b1c;
    border-radius: 10px 0 0 10px;
}

这是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;
}

也添加了这个：

@media only screen and (max-width: 1060px) { 
    .tokenInfoBox, .ticketBox { 
         width: 100%; 
    } 
}

因此， left div和right div （均为 div ）的内容在大屏幕中正常显示，但在小屏幕中溢出并与它们下方的div重叠。 如何将所有溢出内容包装在div ？ 这是大屏幕中的图像，这是小屏幕中的图像，我必须滚动才能看到所有内容。

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; }

你可以用flex在这种情况下，申请时flex-wrap 。

Answer 2

如果我理解得很好，问题是因为您已经设置了 .midContainer 的高度，请尝试以下操作：

.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%;
}

这将使您的 div 增长以适应所需的高度。

还要考虑使用媒体查询，小型设备很难并排读取 2 个 div，也许应该一个比一个更好

@media (max-width: 768px) {
  .midContainer {
    flex-direction: column;
  }
  .tokenInfoBox {
    width: 100%;
  }
  .ticketBox {
    width: 100%;
  }
}

我也强烈建议使用顺风