如果父級使用flex，則溢位div-有解無憂

我想使用 flex 1 將我的視口分成 2 個部分。在底部區域需要帶有溢位項的容器。然而效果并不好。此外，我還有基于 flex parent 所需的修復高度的問題溢位，例如。50vh？我試圖找到與我的問題相匹配的解決方案，但似乎都不合適。

*{
  margin: 0;
  padding: 0;
}

.container{
  height: 100vh;
  width: 100vw;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.view{
  flex: 1;
  background-color: red;
}

.management{
  flex: 1;
  background-color: blue;
}

header{
  height: 40px;
  background-color: green;
}

p{
  height: 30px;
}

.main-content{
  overflow: auto;
}

<div class="container">
   <div class="view">
      50% viewport
   </div>
   <div class="management">
     <header>Title</header>
     <div class="main-content">
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
     </div>
   </div>
  
 </div>

uj5u.com熱心網友回復：

看看這是否是您正在尋找的結果

*{
  margin: 0;
  padding: 0;
}

.container{
  height: 100vh;
  width: 100vw;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.view{
  height:50%;
  background-color: red;
}

.management{
  display:flex;
  flex-direction:column;
  height:50%;
  background-color: blue;
}

header{
  height: 40px;
  background-color: green;
}

p{
  height: 30px;
}

.main-content{
    height:100%;
    overflow-y:auto;
}

<div class="container">
   <div class="view">
      50% viewport
   </div>
   <div class="management">
     <header>Title</header>
     <div class="main-content">
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>last Item</p>
     </div>
   </div>
  
 </div>

uj5u.com熱心網友回復：

正確答案。主容器應該溢位專案

*{
  margin: 0;
  padding: 0;
}

.container{
  height: 100vh;
  width: 100vw;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.view{
  height: calc(100vh - 50vh);
  background-color: red;
}

.management{
 height: calc(100vh - 50vh);
 width: 100%;
 background-color: blue;

}

header{
  height: 40px;
  background-color: green;
}

p{
  height: 30px;
}

.main-content{
  height: calc(100% - 40px);
  width: 100%;
  overflow-y: auto;
}

<div class="container">
   <div class="view">
      50% viewport
   </div>
   <div class="management">
     <header>Title</header>
     <div class="main-content">
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
       <p>Item</p>
     </div>
   </div>
  
 </div>

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

標籤：javascript css

上一篇：如何在Compose中創建可重用的修飾符？

下一篇：使用python從文本/javascript中提取資料