My css is messing with the scrolling working properly

Question

I have this setup https://codepen.io/saraLance/pen/LYGevXW and I have a couple of problems.

the header covers more than the parent width.
Scroll works weird, it seems to stop after the button play , and then I have to scroll again.

I have tried to fix the scroll problem making the header fixed position: fixed; width: 100% position: fixed; width: 100% but the header covers more than the parent div.

I also have no idea why screen height it's not the same that it's parent screens .

Ideally sit-container should be after header and header should be fixed.

 div { width: auto; }.screens { background: green; height: 100vh; display: flex; overflow-x: hidden; overflow-y: auto; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1 { height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section { display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div> </body> </html>

Answer 1

screens class should be width: auto and overflow-x:hidden should be on button-section
See output in full screen

 div { width: auto; } @media (min-width: 768px) { width:35%; margin:auto; }.screens { background: green; height:"auto"; display: flex; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; @media (min-width: 768px) { width: 35vw; } }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1{ height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section{ display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; overflow-x:hidden; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }

 <div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div>

My css is messing with the scrolling working properly

Question

1 answers

solution1
0 2020-07-04 04:47:08

My css is messing with the scrolling working properly

Question

1 answers

solution1 0 2020-07-04 04:47:08

solution1
0 2020-07-04 04:47:08