How to solve problems with scroll?

user_9557666 0
Viewed 86

body {
    overflow: hidden;
}

.wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    height: 30vh;
    margin: 24px;
    background: rgb(194,194,194);
}

.sidebar {
    flex: 0 0 150px;
    padding: 12px;
    background: rgb(245, 134, 134);
}

.content {
    flex: 1 1 auto;
    width: calc(100% - 150px);
    padding: 12px;
    background: rgb(11, 134, 134);
}

.content-inner {
    display: flex;
}

.content-inner > p {
    flex: 0 0 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar">
            <header>Sidebar</header>
            <div class="sidebar-content">
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
            </div>
        </div>
        <div class="content">
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
        </div>
    </div>
</body>
</html>

I have a weird situation, but I hope, it is actual, in general.

As you could notice, the whole wrapper scrolls vertically. The expected behavior is that I want the content section to be scrolled horizontally without affecting sidebar (means that sidebar should be always visible and static while scrolling horizontally) and at the same time, the whole content should scrollable vertically as it is now. I can only achieve the first case, but in that case, when the whole content is being scrolled vertically, content sections vertical scrollbar causes it's content to be cut vertically.

Note that the horizontal scrollbar should be visible on the viewport, and not be at the bottom of the whole content, as the content can be much longer

I want to achieve this via CSS. I can do this with JavaScript I assume, but better to be done by CSS.

css html javascript
2 Answers

I made these two changes to make it work -

  1. Adding align-items: flex-start to .wrapper, this solves the issue of containers getting cut.
  2. Adding overflow-x: auto to .content, to enable horizontal scrolling.

body {
    overflow: hidden;
}

.wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    height: 40vh;
    margin: 24px;
    background: rgb(194,194,194);
    align-items: flex-start;
}

.sidebar {
    flex: 0 0 150px;
    padding: 12px;
    background: rgb(245, 134, 134);
}

.content {
    overflow-x: auto;
    flex: 1 1 auto;
    width: calc(100% - 150px);
    padding: 12px;
    background: rgb(11, 134, 134);
}

.content-inner {
    display: flex;
}

.content-inner > p {
    flex: 0 0 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar">
            <header>Sidebar</header>
            <div class="sidebar-content">
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
                <p>Sidebar content</p>
            </div>
        </div>
        <div class="content">
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
            <div class="content-inner">
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
                <p>Some text</p>
            </div>
        </div>
    </div>
</body>
</html>

user_69192020

This works for me.

.scroll-area {
 width:85%;
    float:left;
  overflow: scroll;
    white-space:nowrap;
}

ul li {
  display: inline;
}
.sidebar
{
    width:15%;
    float:left;
}
<div class="sidebar">
  <h1 class="logo">Title</h1>
</div>
<div class="rightcontent">
  <div class="scroll-area">
    <div class="image-gallery">
      <ul>
        <li><img src="http://placehold.it/500x800"></li>
        <li><img src="http://placehold.it/500x800"></li>
        <li><img src="http://placehold.it/500x800"></li>
      </ul>
    </div>
  </div>
</div>

user_82486350
Related