Let's say I want to hide container's horizontal content, but at the same time time I want to translate child elements. Adding overflow-x: hidden; to the parent causes it to clip vertically translated children too. Why does this happen and how can I work around it?

.content{
  margin: 1rem;
}

.rail {
  display: flex;
  padding: 0.5rem;
  background: #EEE;
  overflow-x: hidden;
}

.card {
  padding: 1rem;
  border: 1px solid gray;
  background: #FFF;
}

.card:hover {
  transform: translate3d(0px, -1.5rem, 0px);
}

<div >
  <div >
    <div >CONTENT</div>
  </div>
</div

CodePudding user response：

I faced a similiar issue recently as well, a workaround I found was just to wrap a new container around the transformed element:

.content {
  margin: 1rem;
}

.rail {
  display: flex;
  padding: 0.5rem;
  background: #EEE;
}

.card {
  padding: 1rem;
  border: 1px solid gray;
  background: #FFF;
}

.card:hover {
  transform: translate3d(0px, -1.5rem, 0px);
}

<div >
  <div >
    <div >
      <div >CONTENT</div>
    </div>
  </div>
</div>

CodePudding user response：

As far as I can see, yes you have to make the rail higher.

However, you can do this and make it look like it is not bigger. See the following CSS:

.content{
    margin: 1rem;

    /*  Just to help show what is happening  */
    padding: 1rem;
    background: pink;

    /*  Parameterise the work around  */
    --railPadding: 0.5rem;
    --vertTranslate: -1.5rem;
    --extraSpace: calc(0px - (var(--railPadding)   var(--vertTranslate)));
}

.rail {

    /*  The important constraints.  */
    display: flex;
    overflow-x: hidden;

    /*  Make the extra space without changing the content box of the rail.  */
    padding: calc(var(--railPadding)   var(--extraSpace)) var(--railPadding) var(--railPadding) var(--railPadding);
    /*  Offset the extra height by backing over the margin.  */
    margin-top: calc(0px - var(--extraSpace));
    /*  Make the rail look like it has not backed over anything by making the overlap transparent.  */
    background: linear-gradient(to top, #EEE calc(100% - var(--extraSpace)), rgba(0, 0, 0, 0) var(--extraSpace));
}

.card {
    padding: 1.0rem;
    border: 1px solid gray;
    background: #FFF;
}

.card:hover {
    transform: translate3d(0px, var(--vertTranslate), 0px);
}