Fixed size element overlapping sidebar-CodePudding

I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.

1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?

2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?

The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.

I have tried lots of CSS variations but cannot get this working.

JSFiddle:

Html:

<!DOCTYPE html>
<html>
<header ></header>
<div >

  <div >
    <div >Item1</div>
  </div>
  
  <main >
    <article >
      <div >
        <div >
          <div >
          
          </div>        
          <div >
          
          </div>
        </div>
      </div>
    </article>
  </main>
  
</div>
</html>

CSS:

.top-header {
  height: 40px;
  background:red;
}

.sidebar {
  z-index: -1;
  background:blue;
  float: left;
  width: 200px;
  height: calc(100vh - 3.5rem);
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.main {
  margin-left: 200px;
}

.content {
  padding: 1.1rem;
}

.container {
  max-width: 100%;
}

.row { 
  display: flex;
  flex-wrap: wrap;
}

.justify-content-center {
  justify-content: center;
}


.small-flexible-grid {
  background: yellow;
  width: 60%;
  height: 100px;
}

.large-fixed-grid {
  background: green;
  min-width:600px;
  width: 600px;
  height: 100px;
}

Update:

I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid

CodePudding user response：

how about change the styles to

.large-fixed-grid { 
  background: green; 
  width: 100%; 
  max-width: 600px; 
  height: 100px; 
}

CodePudding user response：

Solved both of these using the following

JSFiddle: https://jsfiddle.net/m9wdzgb1/

Html:

<!DOCTYPE html>
<html>
<header id="top-header-onscroll" ></header>
<div >

  <div >
    <div >Item1</div>
  </div>
  
  <main >
    <article >
      <div >
        <div >
          <div >
          
          </div>        
          <div >
          
          </div>
        </div>
      </div>
    </article>
  </main>
  
</div>
</html>

CSS:

.top-header {
  height: 40px;
  background:red;
}

.sidebar {
  z-index: -1;
  background:blue;
  float: left;
  width: 200px;
  height: calc(100vh - 3.5rem);
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.main {
  margin-left: 200px;
}

.content {
  padding: 1.1rem;
}

.container {
  max-width: 100%;
}

.row { 
  display: flex;
  flex-wrap: wrap;
}

.small-flexible-grid {
  background: yellow;
  width: 60%;
  margin: auto;
  height: 100px;
}

.large-fixed-grid {
  background: green;
  min-width:600px;
  width: 600px;
  margin: auto;
  height: 100px;
}

Javascript:

window.onscroll = function (e) {
    var top_header = document.getElementById('top-header-onscroll');
    if (top_header) {
        if (window.pageXOffset > 0) {
            top_header.style.width = (window.innerWidth   window.pageXOffset - 30)   'px';
        }
        else {
            top_header.style.width = "";
        }
    }
}