Bootstrap 4: gutter between columns in a row

Question

This layout is almost there, but I can't get gutters to appear between column divs in a row (right side, green). Also configuration of the width of the div holding all the rows (blue) is troublesome. The code is in this jsfiddle, the layout pictured below. The main right-hand column will get some unknown number of items added dynamically. The left side and its items are static.

The core of it is pretty generic; maybe it's the overflow-y scrolling that's at issue? But I've tried many tweaks and nothing works:

<div class="wrapper-right" style="max-height:80%; overflow-y: scroll">
 <div class="row mx-1 mb-1">
  <div class="col-6 item-right px-2">
    <p class="mt-0">item #1</p>
  </div>
  <div class="col-6 item-right px-2">
    <p class="mt-0">item #2</p>
  </div>
 </div>
 etc.
</div>

Answer 1

If you’re looking to have a white space between your two columns, you can use your columns as containers for the content and create new content containers within the columns. That will give you a visible space between the two columns.

You can then set the two main columns to have a height of 100% to fill the space, and set your content_right container to flex and a direction of column. Remove all of the styles from the right wrapper (except the border) and add overflow: auto.

#banner {
    background-color: goldenrod;
    height: 20%;
    border: 1px solid red;
}

#content {
    border: 1px solid red;
    height: 77%;
    position: relative;
}

#content .row {
    border: 1px solid green;
}

#content_left {
    background-color: #ccc;
    height: 100%;
    overflow-y: auto;
}

#content_right {
    background-color: #ddd;
    height: 100%;
    position: relative;
    /* overflow-y: scroll; */
}

.item-left {
    min-height: 50px;
    background-color: yellow;
    ;
}

.item-right {
    min-height: 85px;
    background-color: beige;
    border-right: solid 0.375rem white;
    /* border: 2px dotted #ddd; */
}

.item-right + .item-right {
    border-left: solid 0.375rem white;
    border-right: none;
}

.wrapper-right {
    overflow: auto;
    border: 1px solid blue;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-1" style="height: calc(100vh - 12px); border: 1px solid #00ff00;">
    <div id="banner" class="w-100 my-1 p-2">
        <p>banner</p>
    </div>
    <div id="content" class="row mx-0">
        <div class="col-sm-6 h-100">
            <div id="content_left" class="p-2">
                <div class="h5 w-100" style="background:#fff; text-align:center;">Left</div>
                <div class="content-wrapper p-1">
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #1</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #2</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #3</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #4</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #5</p>
                    </div>
                </div>
            </div>

        </div> <!-- content_left-->
        <div class="col-sm-6 h-100">
            <div id="content_right" class=" d-flex flex-column p-2">
                <div class="h5 w-100" style="background:#fff; text-align:center;">Right</div>
                <div class="wrapper-right">
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p class="mt-0">(r) item #1</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p class="mt-0">(r) item #2</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #3</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #4</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #5</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #6</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #7</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #8</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #9</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #10</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #11</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #12</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #13</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #14</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- content_right -->
    </div> <!-- content -->
</div>

For future reference, it's better to include your code using the snippet tool, rather than using a link to a third-party site.