Position sticky with flex-direction column reverse

user_1376627 0
Viewed 830

I am trying to create a sticky central element with flex-direction column-reverse. Using flex-direction column works fine. Is this possible with column-reverse?

.parent {
  display: flex;
  overflow-y: scroll;
    /*  works with flex-direction: column;   */
  flex-direction: column-reverse;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}
.child, .sticky {
  width: 100%;
  height: 40px;
  background: gold;
  border-bottom: 1px solid #555;
  flex-shrink: 0;
}

.sticky {
  background: crimson;
  position: sticky;
  top: 0;
  bottom: 0;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="sticky"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

flexbox sticky css html
1 Answers

Can you please check the below code? Hope it will work for you. We just add the one div .child-parent in the parent div and set flex properties according to solve your problem.

.parent {
  border: 1px solid #ccc;
  flex-direction: row;
}
.child-parent {
  overflow-y: scroll;
  height: 200px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  position: relative;
}

.child,
.sticky {
  width: 100%;
  height: 40px;
  background: gold;
  border-bottom: 1px solid #555;
  flex-shrink: 0;
  flex-direction: row;
}
.sticky {
  width: 100%;
  background: crimson;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  top: 0;
  display: flex;
  z-index: 1;
  flex-shrink: 0;
}
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <style>
        
    </style>
</head>

<body>
    <div class="parent">
        <div class="child-parent">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">3</div>
            <div class="child">4</div>
            <div class="child">5</div>
            <div class="child">6</div>
            <div class="child">7</div>
            <div class="child">8</div>
            <div class="child">9</div>
            <div class="child">10</div>
            <div class="sticky"></div>
            <div class="child">11</div>
            <div class="child">12</div>
            <div class="child">13</div>
            <div class="child">14</div>
            <div class="child">15</div>
            <div class="child">16</div>
            <div class="child">17</div>
            <div class="child">18</div>
            <div class="child">19</div>
        </div>
    </div>
</body>

</html>

user_122138960
Related