title: Anchor Tags and CSS Flexbox
body: <p>When running the code below, clicking on one of the &lt;a&gt; tags will shift the page to the related element, but it will be the right most column displayed.
  Is there a way to change this behaviour so clicking the &lt;a&gt; tag will shift the page to show the related element as the left hand column.</p>
  <p>Removing the line display:flex, and the &lt;a&gt; tags bring that element to the top of the screen as I would expect.</p>
  <p>Thanks in advance for any advice. Long time reader, first time poster.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          body {
              display: flex;
          }
  
          p {
              font-size: 24px;
          }
  
          h2,
          ul {
              width: 300px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#div1"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div2"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div3"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div4"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div5"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div6"&gt;Item 6&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="div1"&gt;
          &lt;h2&gt;ipsum 1&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="div2"&gt;
          &lt;h2&gt;ipsum 2&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="div3"&gt;
          &lt;h2&gt;ipsum 3&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="div4"&gt;
          &lt;h2&gt;ipsum 4&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="div5"&gt;
          &lt;h2&gt;ipsum 5&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="div6"&gt;
          &lt;h2&gt;ipsum 6&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, molestias eum aliquid sunt autem quisquam.
              Inventore error sequi quaerat, ullam soluta exercitationem consequuntur accusamus autem illo cumque eum
              omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi sint harum possimus corrupti
              amet similique expedita commodi soluta maxime mollitia laboriosam consequuntur quam, enim natus in,
              accusantium officiis deserunt!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>