How to fit carousel within parent div? - css

Question

I'm pulling my hair out because this should be really simple
I have a parent class .wrapper with a display of flex
Inside that is a .carousel div with 100% width and a .info div with width of 500px
Inside of the .carousel class is a container class container the carousel slider. I would expect that when the width is set to 100% it would stay within the parameters of the .carousel class but it is overflowing outside this class and i can't figure out why
Can anyone explain why this is happening?
It also is showing part of the next image in the slider which it should be
$(window).on('load', function() {
$('.carousel-main').owlCarousel({
items: 1,
loop: true,
autoplay: false,
autoplayTimeout: 3000,
nav: true,
navText: [""],
dots: false
});
});
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 1rem;
font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
width: 100%;
}
.wrapper {
display: flex;
width: 100%;
}
.carousel {
width: 100%;
}
.info {
width: 500px;
border-left: #000 1px solid;
height: 100vh;
padding: 1rem;
}
h1 {
text-transform: uppercase;
font-size: 1rem;
}
.container {
width: 100%;
}
.owl-carousel {
overflow: hidden;
padding: 2rem;
}
.carousel-main {
position: relative;
}
/* Nav */
.owl-carousel .owl-nav {
margin-top: 0;
/* resetting margins for nav buttons */
}
.owl-carousel .owl-nav button.owl-prev {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: w-resize;
}
.owl-carousel .owl-nav button.owl-next {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: e-resize;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
color: transparent;
background: transparent;
}
.owl-nav button.owl-prev {
left: 0px;
starting position;
}
.owl-nav button.owl-next {
right: 0px;
starting position;
}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="wrapper">
<div class="carousel">
<div class="container">
<div class="owl-carousel owl-theme carousel-main">
<div>
<img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
<div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>
</div>
</div>
</div>
<!-- End of Carousel -->
<div class="info">
<h1>Contact</h1>
<a herf="mailTo:hello#sashaburger.co.nz">hello#sashaburger.co.nz</a>
</div>
<!-- End of Info -->
</div>
<!-- End of wrapper -->
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>

Answer 1

.container is staying within .carousel as expected. However, .carousel is spanning the full width of .wrapper and pushing .info out of view.
You should change the width of .carousel to be less than 100% to allow .info to move back on screen. If you set width to any integer value and then set flex-basis to 100%, it will use all remaining space.
.carousel {
width: 0;
flex-basis: 100%;
}
$(window).on('load', function() {
$('.carousel-main').owlCarousel({
items: 1,
loop: true,
autoplay: false,
autoplayTimeout: 3000,
nav: true,
navText: [""],
dots: false
});
});
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 1rem;
font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
width: 100%;
}
.wrapper {
display: flex;
width: 100%;
}
.carousel {
width: 0;
flex-basis: 100%;
}
.info {
width: 500px;
border-left: #000 1px solid;
height: 100vh;
padding: 1rem;
}
h1 {
text-transform: uppercase;
font-size: 1rem;
}
.container {
width: 100%;
}
.owl-carousel {
overflow: hidden;
padding: 2rem;
}
.carousel-main {
position: relative;
}
/* Nav */
.owl-carousel .owl-nav {
margin-top: 0;
/* resetting margins for nav buttons */
}
.owl-carousel .owl-nav button.owl-prev {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: w-resize;
}
.owl-carousel .owl-nav button.owl-next {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: e-resize;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
color: transparent;
background: transparent;
}
.owl-nav button.owl-prev {
left: 0px;
starting position;
}
.owl-nav button.owl-next {
right: 0px;
starting position;
}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="wrapper">
<div class="carousel">
<div class="container">
<div class="owl-carousel owl-theme carousel-main">
<div>
<img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
<div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>
</div>
</div>
</div>
<!-- End of Carousel -->
<div class="info">
<h1>Contact</h1>
<a herf="mailTo:hello#sashaburger.co.nz">hello#sashaburger.co.nz</a>
</div>
<!-- End of Info -->
</div>
<!-- End of wrapper -->
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>