CODEWITHSUNDEEP
htmlcssflexbox
SuperTukan
SuperTukan

Reputation: 23

How to fix header in flex element inside another flex element

I am trying to fix header in flex div and allow rest of it to scroll, if needed. Note that both header and rest of flex div content can generally be any height. I encountered this problem many times (i.e. table with fixed header and scrollable content), saw lots of ugly (jQuery) or not-so-dynamic solutions. I hope that flex is the one solution, please help me get it right.

        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/

Upvotes: 0

Views: 684

Answers (1)

Kantoci
Kantoci

Reputation: 493

You are missing this in your css:

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

You added those properties to wrong element: .secondCol .innerFlex which isn't direct parent of your fixed and scrollable element.

Upvotes: 1

Related Questions