lock two columns inside flex container

nicole 0
Viewed 32

How can I make column A and column C fixed with a 100% height of the window, so they don't move when scrolling down? The container display has to be set to flex.

My middle column, C, is the only one I want to scroll/move down (when scrolling the whole window, the body).

I tried with position fixed and absolute but did not get it to work. i can not set a "left" value of the div's, as other surrounding elements (not in this example) are fluid so "left" is not an exact known value for me.

html,body{
  height:100%;
}
.container{
  display:flex;
  height:100%;
}
.a,.c{
  width:100px;
  height:100%;
  background-color:pink;
  display:inline-block;
}
.b{
  width:400px;
  background-color:tomato;
  display:inline-block;
  height:3000px;
}
<div class="container">
  <div class="a">
      A
      <br/>lock
  </div>
  <div class="b">
    B
      <br/>scrollable
  </div>
  <div class="c">
    C
      <br/>lock
  </div>
</div>

flexbox css html
1 Answers

Remove height: 100%; from html.

Then set the .a, .c to height: 100vh; and use position: sticky; with top: 0;.

body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
}

.a,
.c {
  width: 100px;
  height: 100vh;
  background-color: pink;
  display: inline-block;
  position: sticky;
  top: 0;
}

.b {
  width: 400px;
  background-color: tomato;
  display: inline-block;
  height: 3000px;
}
<div class="container">
  <div class="a">
    A
    <br/>lock
  </div>
  <div class="b">
    B
    <br/>scrollable
  </div>
  <div class="c">
    C
    <br/>lock
  </div>
</div>

Kameron0
Related