CODEWITHSUNDEEP
htmlcssflexbox
go4cas
go4cas

Reputation: 1191

Flexbox with fixed element

If I have a flexbox container with a fixed child, but it does not seem to wrap elements correctly:

<div id="parent">
  <div id="child-1"></div>
  <div id="child-2"></div>
</div>

#parent {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
}
#child-1 {
  display: flex;
  flex: 1 0 auto;
  position: fixed;
}
#child-2 {
  display: flex;
  flex: 1 1 auto;
  overflow-y: scroll;
}

Upvotes: 0

Views: 2150

Answers (2)

Tim van Daatselaar
Tim van Daatselaar

Reputation: 154

Add position:sticky; and top:0; to the #child-1 instead of position fixed;

Upvotes: 5

go4cas
go4cas

Reputation: 1191

I have fixed this with:

  • parent:

    display: flex; flex-direction: column; height: 100%;

  • child 1:

    display: flex; flex: 1 0 auto; justify-content: space-between; flex-wrap: wrap;

  • child 2

    display: flex; flex-wrap: wrap; flex: 1 1 auto; overflow-y: auto;

Upvotes: -1

Related Questions