Position fixed cover text-CodePudding

I need the main content to stay at the right side of the sidebar. Now you can notice that sidebar is covered by the body content because of fixed position.

Is there a solution fix avoid this issue without adding margin right for the main content?

.App {
  display: flex;
}

.s {
  position: fixed;
}

<div >
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
  </div>
</div>

CodePudding user response：

Use position:sticky instead.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.App {
  display: flex;
}

.s {
  position: sticky;
  top: 0;
  border: 1px solid red;
  align-self: flex-start;
  min-height: 100vh;
}

<div >
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
  </div>
</div>

CodePudding user response：

You can wrap the sidebar with an element with fixed width.

.App {
  display: flex;
}

.s1 {
  width: 100px;
}

.s {
  position: fixed;
}

<div >
  <div >
    <div class='s'>sidebar</div>
  </div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
  </div>
</div>

CodePudding user response：

You could add width to app and use margin-left: auto; on your content.

.App {
  display: flex;
  width: 100px;
}

.s {
  position: fixed;
}

.m {
  margin-left: auto;
}

<div >
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
  </div>
</div>