如何修復另一個柔性元素內的柔性元素中的標題

我正試圖修復Flex div中的標題並允許其餘部分滾動（如果需要）。請注意，標題和flex div內容的其餘部分通常可以是任何高度。我多次遇到這個問題（例如，帶有固定標題和可滾動內容的表格），看到了很多醜陋的（jQuery）或者不那麼動態的解決方案。我希望flex是唯一的解決方案，請幫助我解決問題。如何修復另一個柔性元素內的柔性元素中的標題

 body {padding: 0; margin: 0;} 
 
\t \t \t \t p {margin-bottom: 17px;} 
 
\t \t \t \t .wrapper {width: 100%; height: 200px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;} 
 
\t \t \t \t .flexContainer {display: flex; flex-wrap: nowrap; justify-content: space-between ; flex-direction: row; align-items: stretch; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #f00;} 
 

 
\t \t \t \t .firstCol {width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;} 
 
\t \t \t \t .secondCol {width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box; overflow: auto;} 
 
\t \t \t \t .secondCol .innerFlex {height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; width: 100%; box-sizing: border-box; flex: auto; overflow: hidden;} 
 
     .secondCol .innerFlex .innerFlexContainer {} 
 
\t \t \t \t .secondCol .innerFlex .firstItem {border: 1px solid #00f; width: 100%; order: 1; flex-grow: 0;} 
 
\t \t \t \t .secondCol .innerFlex .secondItem {border: 1px solid #00f; width: 100%; aling-self: flex-end; box-sizing: border-box; display: block; order: 2; flex-grow: 1; overflow: scroll;} 
 
\t \t \t \t .thirdCol {width: 32%; box-sizing: border-box; order: 3; border: 1px solid #f0f; box-sizing: border-box;}

<div class="wrapper"> 
 
    <div class="flexContainer"> 
 
     <div class="firstCol"> 
 
      <img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt=""> 
 
     </div> 
 
     <div class="secondCol"> 
 
      <div class="innerFlex"> 
 
       <div class="innerFlexContainer"> 
 
        <div class="firstItem"> 
 
         This is header that I'd like to fix and so keep it visible at all times. 
 
        </div> 
 
        <div class="secondItem"> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        123456<br> 
 
        </div> 
 
       </div> 
 
      </div>    
 
     </div> 
 
     <div class="thirdCol"> 
 
     789 
 
     </div> 
 
    </div> 
 
<!-- /big and first flex container --> 
 
</div>

小提琴：https://jsfiddle.net/w8pe0j00/6/

來源

2017-01-23 SuperTukan

你不想在任何東西上設置像素高度？ –

我需要它儘可能一般，並且不會在任何分辨率上留下未使用的空間。 – SuperTukan

你在你的CSS缺少這樣的：

.secondCol .innerFlex .innerFlexContainer { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}

您添加這些屬性到錯誤的元素：.secondCol .innerFlex它不是直接父你的固定和可滾動元素。

來源

2017-01-23 12:57:03 Kantoci

如何修復另一個柔性元素內的柔性元素中的標題

回答

相關問題