I have a simple markup for my page and I am experiencing an issue where the scroll bar appears too late when I reduce the page width. For better understanding, here is the codepen and photo.
CodepenWithout scrollbarWith scrollbar
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Manrope", sans-serif;}body { overflow: hidden; min-height: 100vh; max-width: 100vw; display: flex;}aside { padding: 20px 0; min-width: 350px; width: 25%; height: 100vh; background: #111320; display: flex; flex-direction: column; gap: 40px; align-items: center; overflow-y: auto;}section { background: #f3f5fa; width: 100%; height: 100vh;}.settings-main { width: 100%; padding: 30px;}.section-main { flex-direction: column;}.accounts-item { width: 50%; padding: 20px; background: #fff; color: #000; border-radius: 10px;}.accounts-header { display: flex; justify-content: space-between;}.accounts-title { font-size: 24px; font-weight: 600;}.account-connect-btn { width: 100px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 3px; border: 1px solid #000; font-size: 16px; font-weight: 600; cursor: pointer;}.connected-accounts { margin-top: 12px; display: flex; flex-direction: column; max-width: 100%; gap: 10px; overflow: visible;}.connected-account { display: flex; justify-content: space-between; align-items: center;}.connected-account-sect { display: flex; gap: 7px; align-items: center;}.connected-account-name { font-weight: 600;}.connected-account-more { display: flex; gap: 5px;}.connected-account-disconnect { padding: 5px 8px; display: flex; justify-content: center; align-items: center; gap: 5px; background: #fbeeee; border: 1px solid #fbaaaa; border-radius: 5px; font-size: 14px; cursor: pointer;}.connected-account-select { padding: 5px 8px; display: flex; justify-content: center; align-items: center; font-size: 14px; border: 1px solid #000; border-radius: 5px; cursor: pointer;}.connected-account-selected { background: #202020; color: #fff; border: 0;}@media (max-width: 1200px) { .accounts-item { width: 100%; overflow-x: auto; } .accounts-item { width: 100%; } .connected-account-name { width: max-content; white-space: nowrap; }}@media (max-width: 700px) { aside { min-width: 80px; max-width: 100px; }}<aside></aside><section><div class="settings-main"><div class="section-main"><div class="accounts-item"><div class="accounts-header"><div class="accounts-title">Youtube</div><div class="account-connect-btn" data-connect-platform="youtube">Connect</div></div><div class="connected-accounts"><div class="connected-account"><div class="connected-account-sect"><div class="connected-account-name">Channel1</div></div><div class="connected-account-more"><div class="connected-account-select connected-account-selected" data-channel-id="${e.channelId}"><span>Selected</span></div><div class="connected-account-disconnect" data-channel-id="${e.channelId}"><span>Disconnect</span></div></div></div><div class="connected-account"><div class="connected-account-sect"><div class="connected-account-name">Channel2</div></div><div class="connected-account-more"><div class="connected-account-select" data-channel-id="${e.channelId}"><span>Select</span></div><div class="connected-account-disconnect" data-channel-id="${e.channelId}"><span>Disconnect</span></div></div></div></div></div></div></div></section>Sorry for the cleanliness of the code, it may seem dumb to more professional
What I have noticed: When I adding those properties to body element problem almost disapearingflex-direction: column; overflow: auto