overflow-x hidden and overflow-y visible - css

Question

I am building a carousel and I want the container to have overflow-x hidden and overflow-y visible.When the items are hovered
a transform: scale() is applied and I want them to overflow from the container but only on the y axis.
I tried to set the container to overflow-x: hidden and the child to overflow-y: visible but that didn't work.
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
margin-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
position: relative;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow-y: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.left-arrow {
left: 2%;
top: 50%;
}
.right-arrow {
left: 98%;
top: 50%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>

Answer 1

You just have to give the .container a height, for example: 100vh.
Because the tops of the children are cut off i recommend to use padding-top: 60px instead of margin-top: 60px.
Because of the changed height the arrows are wrong positioned. To adjust this i used a different top value: half of the childrens height plus the containers padding-top (125px + 60px).
Because the .wrapper doesn't need position: relative in this example i removed it. Maybe in your project it is necessary for the arrow function(s)...
Working example: (watch it in "Full page" mode to see it without scrollbars)
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
height: 100vh;
padding-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow-y: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 185px;
}
.left-arrow {
left: 2%;
}
.right-arrow {
left: 98%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>
Because the arrows are still cut of you could add an extra container (here .parent) and add height, padding-top and overflow-x to it (instead of to the container).
Working example: (watch in "Full page" mode to see it without scrollbars)
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
}
.parent {
height: 100vh;
padding-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 185px;
}
.left-arrow {
left: 2%;
}
.right-arrow {
left: 98%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="parent">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>