CSS borders do not reach across the full width of a scrollable div-CodePudding

Problem

The border-bottom stops where to scrolling starts. How to fix this? I tried setting width of 100% on those div's, but that did'nt seem to help.

See Fiddle https://jsfiddle.net/exrb8oma/

CSS

.gant-container {
    display: grid;
    grid-template-areas:
        "left right";
    grid-template-columns: max(min(20%,400px), 300px);
}

.left-panel {
    grid-area: left;
    background: grey;
}

.right-panel {
    grid-area: right;
    background: lightgray;
    overflow-x: scroll;
}

.right-panel-header {
    border-bottom: 1px solid #000;
}

.right-panel-body {
    display: flex;
    flex-direction: column;
}

.gant-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    height: 30px;
}

.gant-item {
    border-right: 1px solid #eee;
    min-width: 50px;
    height: 100%;
}

.weekend {
    background-color: orangered;
}

HTML

<link rel="stylesheet" type="text/css" href="style.css">

<div >
    <div >
        Left panel...
    </div>
    <div >
        <div >
            Header
        </div>
        <div >
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

add display: grid; to .right-panel

.gant-container {
    display: grid;
    grid-template-areas:
        "left right";
    grid-template-columns: max(min(20%,400px), 300px);
}

.left-panel {
    grid-area: left;
    background: grey;
}

.right-panel {
    grid-area: right;
    background: lightgray;
    overflow-x: scroll;
    display: grid;
}

.right-panel-header {
    border-bottom: 1px solid #000;
}

.right-panel-body {
    display: flex;
    flex-direction: column;
}

.gant-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    height: 30px;
}

.gant-item {
    border-right: 1px solid #eee;
    min-width: 50px;
    height: 100%;
}

.weekend {
    background-color: orangered;
}

<div >
    <div >
        Left panel...
    </div>
    <div >
        <div >
            Header
        </div>
        <div >
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

The width of the .gant-item class for each rectangle is too large and it's essentially spilling out of your .gant-row element, so the border on .right-panel-header is fitting to the 300px you defined for the .right-panel container, but the container's not as wide as all the items within it.

Maybe try using a percentage as opposed to min-width: 50px for each .gant-item.

CodePudding user response：

You need to use flex-shrink for the flex items.

If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink reference

An example of flex shrink property:

 .item1{ 
    flex: 1 1 20em (shorthand for flex-grow: 1, flex-shrink: 1, 
                     flex-basis: 20em) 
 }