[ERLEDIGT] Bootstrap mit scroll Problem

[MrVon]

Hallo zusammen,

auf der Suche nach meinen Problem bin ich auf dieses Forum gestoßen. Da dies mein erster Post ist bitte ich um Entschuldigung, wenn ich nicht gleich die richtigen Tag`s finde.

Zu meinen Problem. Meine Box ist 1100px x 610px groß. CSS gekürzt: "width:100%; height:calc(75px + (610 - 75) * ((100vw - 320px) / (1600 - 320)));". In dieser Box befinden sich 2 Spalten. Bei 768px Boxbreite wird es zu einer Spalte untereinander. Alles so wie es soll, jedoch optisch mit den Scrollbars ein No-Go . Es sind immer 3 Scrollbars zu sehen.
Ich möchte das bei 2 Spalten 2 Schrollbars und bei einer Spalte eine Scrollbar ist.

Wie kann ich dies reallisieren?

DANKE vorab.

Spoiler

                <!--content -->         

                <div class="box">             
                    <div class="row">                 
                        <div class="col-lg-6">                     
                            <div class="row">             
                                <div class="col-lg-12">
                                    <div class="headcontent">                                     
                                        <div class="contentname">
                                            <h2>Seite</h2>
                                        </div>
                                    </div>
                                </div>                                             
                                <div class="col-lg-12">                             
                                    <div class="newsbg">
                                        <div class="row no-gutters">
                                            <div class="col-lg-5">
                                                <div class="newspicture" style="background-image:url(images/1.jpg)">
                                                </div>
                                                <div class="newsdate">
                                                    16 days ago
                                                </div>
                                                <div class="newsposter">
                                                    published by <font color="#f42339">Romeo</font>
                                                </div>
                                            </div>                             
                                            <div class="col-lg-7">
                                                <div class="newstextbox">
                                                    <div class="newsheadline">
                                                        At vero eos et accusam et justo
                                                    </div>
                                                    <div class="newsline">
                                                    </div>
                                                    <div class="newssubtext">
                                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                                    </div>
                                                </div>
                                                <div class="newssocial">
                                                    <div class="love">
                                                        <i class="far fa-heart"></i> 8764
                                                    </div>
                                                    <div class="share">
                                                        <i class="fab fa-facebook-square"></i> share
                                                    </div>
                                                    <div class="readmore">
                                                        <i class="far fa-caret-square-right"></i> read more
                                                    </div>
                                                </div>
                                            </div>                 
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>                                             
                        <div class="col-lg-6">                     
                            <div class="row">             
                                <div class="col-lg-12">
                                    <div class="headcontent">                                     
                                        <div class="contentname">
                                            <h2>Seite</h2>
                                        </div>
                                    </div>
                                </div>                                                 
                                <div class="col-lg-12">                             
                                    <div class="newsbg">
                                        <div class="row no-gutters">
                                            <div class="col-lg-5">
                                                <div class="newspicture" style="background-image:url(images/1.jpg)">
                                                </div>
                                                <div class="newsdate">
                                                    16 days ago
                                                </div>
                                                <div class="newsposter">
                                                    published by <font color="#f42339">Romeo</font>
                                                </div>
                                            </div>                             
                                            <div class="col-lg-7">
                                                <div class="newstextbox">
                                                    <div class="newsheadline">
                                                        At vero eos et accusam et justo
                                                    </div>
                                                    <div class="newsline">
                                                    </div>
                                                    <div class="newssubtext">
                                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                                    </div>
                                                </div>
                                                <div class="newssocial">
                                                    <div class="love">
                                                        <i class="far fa-heart"></i> 8764
                                                    </div>
                                                    <div class="share">
                                                        <i class="fab fa-facebook-square"></i> share
                                                    </div>
                                                    <div class="readmore">
                                                        <i class="far fa-caret-square-right"></i> read more
                                                    </div>
                                                </div>
                                            </div>                 
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>                                                       
                    </div>
                 
                </div> 
                 <!--content -->

 

[MrVon]

Hi, ich habe es so gelößt. Ob es überall funktioniert weiß ich noch nicht. Box höhe muss noch angepasst werden.

In CSS Klassen angelegt:

@media (min-width: 768px) {
.abc {
      overflow-y: hide !important;
}
.abd{
    height:calc(60px + (540 - 60) * ((100vw - 320px) / (1600 - 320)));
    overflow-y: scroll;
    overflow-x: hidden;
}

@media (min-width: 992px) {
.abc{
    height:calc(60px + (540 - 60) * ((100vw - 320px) / (1600 - 320)));
    overflow-y: scroll;
    overflow-x: hidden;
}
.abd{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.abd::-webkit-scrollbar {
    display: none;
}

HTML geändert:

<div class="row abd">
                    
<div class="col-lg-6 abc">

Leider weiß ich nicht wie ich den Post als erledigt markieren kann.