Calc not working with position fixed

HTML & CSS
1

Hi all

I have a demo here - https://codepen.io/mt-ttmt/pen/mLMGvr

I have a horizontally scrolling content div

I need to have a margin either side of this scrolling content.

I have done this using calc.

When page scrolls the scrolling content sticks to the top of the page using position: fixed;

When this happens I lose the margins.

How can I keep the margins with position: fixed;

html, body{
  height: 100%;
}

body {
  background: grey;
  font-family: sans-serif;
  margin: 0;
}

.upper-content{
  background: red;
  height: 250px;
}

.page-content{
  position: relative;
  background: white;
  height: 2000px;
  max-width: 900px;
  margin: 0 auto;
}

.content-wrapper{
  position: relative;
}

.header-scroll{
  border: 1px solid yellow;
  left: 50%;
  overflow-y: scroll;
  position: absolute;
  max-width: 900px;
  z-index: 20;
  transform: translateX(-50%);
  width: -webkit-calc(100% - 50px);
}

.content{
  display: flex;
  float: left;

  div{
    background: lightgrey;
    font-size: 20px;
    padding: 40px;
    margin-right: 5px;
    width: 100%;

    &:last-of-type{
      margin-right: none;
    }

  }
}

.fixed{
  position: fixed;
  top: 0;
  //margin: 0 25px 0 25px;
  //width: calc(100% - 50px);
}
2

The calc is working but your max-width is the size that is being used on large screens.

In .header-scroll set your max-width to 850px instead of 900px and it should do what you want.

Why are you using -webkit-calc and not just calc ?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.