'Position fixed cover text

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 class="App">
  <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>
htmlcss


Solution 1:[1]

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 class="App">
  <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>

Solution 2:[2]

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

.App {
  display: flex;
}

.s1 {
  width: 100px;
}

.s {
  position: fixed;
}
<div class="App">
  <div class="s1">
    <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>

Solution 3:[3]

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 class="App">
  <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paulie_D
Solution 2 Mosh Feu
Solution 3 Kameron

Related Questions