Naomi Naomi - 1 month ago 13
CSS Question

Increase the width instead of overlap when using flexbox

I am trying to build a sort of carousel effect. I am using flexbox to line the divs up. The design is made for a screen that has resolution 1920x1080 and all the divs line up properly but when I move it to a smaller screen the divs overlap. I want them to still be on one line but keep the same width of each div and scroll to reveal the overflow.



.articleDisplay {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
}
/*ARTICLE FLIPPING*/

.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 352px;
height: 450px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background-image: url(http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg);
width: 352px;
height: 450px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #f8f9f9;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 352px;
height: 450px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #f8f9f9;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
font-family: Bebas Neue;
color: #232022;
}

<div class="articleDisplay">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h4 class="rating">Hello</h4>
<div class="rating">
<center>
<p id="rate">4.3</p>
</center>
</div>
<h5>This will be a headline</h5>
</div>
<div class="back">
<h4>Hello</h4>
<h4 class="articleHeader">#BR2017 NEW VENUE</h4>
<p class="articleDescription">I've got a pen</p>
<button class="readMore">
CONTINUE READING
</button>
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h4>Hello</h4>
</div>
<div class="back">
<h4>Hello</h4>
<h4 class="articleHeader">#BR2017 NEW VENUE</h4>
<p class="articleDescription">I've got an apple</p>
<button class="readMore">
CONTINUE READING
</button>
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h4>Hello</h4>
</div>
<div class="back">
<h4>Hello</h4>
<h4 class="articleHeader">#BR2017 NEW VENUE</h4>
<p class="articleDescription">UH</p>
<button class="readMore">
CONTINUE READING
</button>
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h4>Hello</h4>
</div>
<div class="back">
<h4>Hello</h4>
<h4 class="articleHeader">#BR2017 NEW VENUE</h4>
<p class="articleDescription">APPLE PEN</p>
<button class="readMore">
CONTINUE READING
</button>
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h4>Hello</h4>
</div>
<div class="back">
<h4>Hello</h4>
<h4 class="articleHeader">#BR2017 NEW VENUE</h4>
<p class="articleDescription"></p>
<button class="readMore">
CONTINUE READING
</button>
</div>
</div>
</div>
</div>





I've removed irrelevant CSS

Answer

Try these two adjustments:

.articleDisplay {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  overflow: auto;    /* NEW */
}

.flip-container, .front, .back {
  min-width: 352px; /* ADJUSTED (formerly `width: 352px`) */
  height: 450px;
}

The first adjustment tells the container to enable a scrollbar when there is overflow.

The second adjustment prevents the divs from shrinking/overlapping by setting a minimum width.

Comments