Entire body moved up after clicking on anchor link

Question

I have an issue with the folowing HTML/CSS:

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  width: 100%;
  height: 50px;
  background-color: #353535;
}

.toolbar>.title {
  width: 220px;
  float: left;
  font-size: 1.6em;
  color: #d3d3d3;
  padding: 8px 10px;
  cursor: pointer;
}

.content {
  width: 100%;
  height: calc(100% - 95px);
  display: flex;
}

.content>div {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
}

.content>div:first-child {
  flex: 0 1 auto;
  width: 33%;
}

.content>div:last-child {
  flex: 2 1 67%;
  margin-top: 1%;
  margin-left: 50px;
  height: 98% !important;
  overflow-x: hidden;
  overflow-y: scroll;
}

.content>div>.resizable_editor {
  width: 100%;
  height: 100%;
  display: flex;
}

.footer {
  text-align: center;
  color: #646262;
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #24292e;
  font-size: 16px;
  line-height: 24px;
  word-wrap: break-word;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body> :first-child {
  margin-top: 0 !important;
}

.markdown-body> :last-child {
  margin-bottom: 0 !important;
}

#queryPanel,
#resultPanel {
  display: none;
}

<div class="toolbar">
  <div class="title">Title</div>
</div>
<div class="content">
  <div id="configPanel">
    <h3>Configuration</h3>
    <div class="resizable_editor">
      <p>some text to edit</p>
    </div>
  </div>
  <div id="queryPanel"></div>
  <div id="resultPanel"></div>
  <div id="docPanel" class="markdown-body">
    <h2 id="summary">Summary</h2>
    <ul>
      <li><a href="#first_anchor">First Anchor</a></li>
      <li><a href="#second_anchor">Second Anchor</a></li>
    </ul>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>

    <h1 id="first_anchor">First Anchor</h1>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>

    <h1 id="second_anchor">Second Anchor</h1>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>

  </div>
</div>
<div class="footer">
  <p>Some text footer</p>
</div>

The first display is correct, but after clicking on one of the links, the entire body is moved a few pixels up, and I can't understand why:

first display:

After clicking on second anchor:

How can I do to prevent the body from moving up ?

Here is a JSFiddle to reproduce the issue

Answer 1

If you want your code works well with CSS Flexbox, you can add the properties below to the div which has configPanel id.

display: flex;
flex-direction: column;

So, it should be like this:

.content > div:first-child {
    flex: 0 1 auto;
    width: 33%;
    display: flex;
    flex-direction: column;
}

and here is the result:

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.toolbar {
    width: 100%;
    height: 50px;
    background-color: #353535;
}

.toolbar > .title {
    width: 220px;
    float: left;
    font-size: 1.6em;
    color: #d3d3d3;
    padding: 8px 10px;
    cursor: pointer;
}

.content {
    width: 100%;
    height: calc(100% - 95px);
    display: flex;
}

.content > div {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 100%;
}

.content > div:first-child {
    flex: 0 1 auto;
    width: 33%;
    display: flex;
    flex-direction: column;
}

.content > div:last-child {
    flex: 2 1 67%;
    margin-top: 1%;
    margin-left: 50px;
    height: 98% !important;
    overflow-x: hidden;
    overflow-y: scroll;
}

.content > div > .resizable_editor {
    width: 100%;
    height: 100%;
    display: flex;
}

.footer {
    text-align: center;
    color: #646262;
}

.markdown-body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color: #24292e;
    font-size: 16px;
    line-height: 24px;
    word-wrap: break-word;
}

.markdown-body::before {
    display: table;
    content: "";
}

.markdown-body::after {
    display: table;
    clear: both;
    content: "";
}

.markdown-body > :first-child {
    margin-top: 0 !important;
}

.markdown-body > :last-child {
    margin-bottom: 0 !important;
}

#queryPanel,
#resultPanel {
  display: none; 
}

<body>
  <div class="toolbar">
    <div class="title">Title</div>
  </div>
  <div class="content">
    <div id="configPanel">
      <h3>Configuration</h3>
      <div class="resizable_editor">
        <p>
          some text to edit
        </p>
      </div>
    </div>
    <div id="queryPanel"></div>
    <div id="resultPanel"></div>
    <div id="docPanel" class="markdown-body">
      <h2 id="summary">Summary</h2>
      <ul>
        <li><a href="#first_anchor">First Anchor</a></li>
        <li><a href="#second_anchor">Second Anchor</a></li>
      </ul>
      <p> text Intro</p>
      <p> text Intro</p>

      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>

      <h1 id="first_anchor">First Anchor</h1>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>

      <h1 id="second_anchor">Second Anchor</h1>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>

    </div>
  </div>
  <div class="footer">
    <p>Some text footer</p>
  </div>
</body>