I have a calendar to the left and a side bar to the right:
![enter image description here](https://i.stack.imgur.com/OqoYj.png)

The problem is that, cases are overflowing. Instead, I need to show a scrollbar when it gets longer than its parent.

They are in bootstrap accordions.

Here is the html:

```
 <div id="cal-container">
        <div id="cal-side">
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle project-header" data-toggle="collapse" data-parent="#accordion2" href="#project-list">Projects
                        </a>
                    </div>
                    <div id="project-list" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="event-container project-container">
                            </div>

                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle task-header" data-toggle="collapse" data-parent="#accordion2" href="#task-list">Tasks
                        </a>
                    </div>
                    <div id="task-list" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="event-container task-container">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle case-header" data-toggle="collapse" data-parent="#accordion2" href="#case-list">Cases
                        </a>
                    </div>
                    <div id="case-list" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="event-container case-container">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="cal">
            <div id='calendar'>
            </div>
        </div>
    </div>

```

The events go into the event-containers.

This is the CSS:

```
#cal-side
{
    float:right;
    height:100%;
    width:200px;
    margin:50px 5px 5px 5px;
}

#cal-container
{
    width:100%;
}

.accordion-inner
{
    padding:2px 2px !important;
}

.external-event { /* try to mimick the look of a real event */
    margin: 2px;
    padding-left:4px;
    color: #ffffff;
    background-color:blue;
    font-size: .85em;
    cursor: pointer;    
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 20px;
    overflow:hidden;
    }

.event-container
{
    margin:1px;
}
#cal{ 
}

```

Here is some generated html:
![enter image description here](https://i.stack.imgur.com/jlLJa.png)

I have tried several types of overflow:auto. The only thing that 'worked' was setting event-container max-height to a fixed pixel ammount. Then I see a scrollbar for cases, but otherwise, it does what you see. I need the max height to be the height of cal-side or something...

I'm not sure what to do.

Thanks