html - 如何在另一个 flex 元素内修复 flex 元素中的标题

Question

我正在尝试修复 flex div 中的标题，并在需要时允许其其余部分滚动。请注意，标题和其余的 flex div 内容通常可以是任何高度。我多次遇到这个问题(即具有固定标题和可滚动内容的表格)，看到很多丑陋的(jQuery)或不那么动态的解决方案。我希望 flex 是唯一的解决方案，请帮助我解决问题。

        body {padding: 0; margin: 0;}
				p {margin-bottom: 17px;}
				.wrapper {width: 100%; height: 200px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;}
				.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;}

				.firstCol {width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;}
				.secondCol {width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box; overflow: auto;}
				.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 {}
				.secondCol .innerFlex .firstItem {border: 1px solid #00f; width: 100%; order: 1; flex-grow: 0;}
				.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;}
				.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>

fiddle :https://jsfiddle.net/w8pe0j00/6/

Answer 1

您的 CSS 中缺少此内容:

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

您将这些属性添加到错误的元素:.secondCol .innerFlex，它不是您的固定和可滚动元素的直接父元素。