CSS show scrollbar only when max-width reached

Question

I have two child divs in a parent div with display: flex.

Here's a dummy snippet to represent my situation:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;">
        <div style="width: 100%;">
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text long text long text long text long text long text long text long text long
            text long text long text long text long text long text long text long text long text long text long text
            long text long text long text
        </div>
        <div style="width: fit-content; max-width: 60%; display: flex; overflow: auto;">
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
            <div style="height: 100px; width: 100px; min-width: 100px; background-color: red; margin-right: 15px;"></div>
        </div>
    </div>
</body>

</html>

Output looks like this:

The content in the right div will be added dynamically, in this case we have red boxes. So it may contain 0 or more of those red boxes.

What I want is:

I want for the right div to expand as long as it doesn't reach it's max set width of 60% and after it does I want for a horizontal scrollbar to appear for that div.
As the right div expands (until it reaches 60% of the max width) the left div will decrease in size.

The snippet above will do this if I remove overflow: auto from the right div, but when it reaches it's maximum of 60% the horizontal scrollbar will appear for the whole page instead of only appearing for the right div area.

And if I leave overflow: auto then the scrollbar will be there from the beginning (like you can see in the image, and I only want it to appear after max-width of 60% has been exceeded).

How would I handle this?

EDIT:

Here is codepen link: https://codepen.io/transcend/pen/wvWyZvK

Cherryl Rarewings · Accepted Answer · 2020-10-29 14:56:39Z

1

Update your CSS as below:

.container {
  display: flex;
}
.full-width {
  width: 100%;
  flex: 40%;
}
.box-container {
  width: fit-content;
  max-width: 60%;
  display: flex;
  overflow-x: auto;
}
.box {
  height: 100px;
  width: 100px;
  min-width: 100px;
  background-color: red;
  margin-right: 15px;
}

I have used overflow-x: auto; which helps to generate a horizontal scroll bar. Hope this works fine.

answered Oct 29, 2020 at 14:56

Cherryl Rarewings

6581 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashok K · Accepted Answer · 2021-11-26 10:10:42Z

0

Add this Below line to your Class or Id

overflow:auto;

Like this

 .box{
    height:100px;
    width:100px;
    overflow:auto;
    }

answered Nov 26, 2021 at 10:10

Ashok K

664 bronze badges

Collectives™ on Stack Overflow

CSS show scrollbar only when max-width reached

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related