如何在div中將溢位內容顯示為完整-有解無憂

所以我有這個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? 這是大螢屏中的影像，這是小螢屏中的影像，我必須滾動才能看到所有內容。

uj5u.com熱心網友回復：

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。

uj5u.com熱心網友回復：

如果我理解得很好，問題是因為您已經設定了 .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%;
  }
}

我也強烈建議使用順風

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353272.html

標籤：html css

上一篇：如何在html中添加多個影像？

下一篇：在卡片之間對齊卡片子元素