CSS overflow : how to show bottom element

user_15162545 0
Viewed 353

I just want to show the bottom content .Initially I gave the hidden value to the overflow-x and overflow-y property then I want to show the content which is situated in the bottom of y direction. Here's my code:

<div class="parent">
        <p class="child">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur
            accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus,
            neque ad!
        </p>
    </div>

css:

.parent {
            position: relative;
            border: 2px solid black;
            width: 200px;
            height: 100px;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .child {
            position: absolute;
            transform: translate(50px, -50px);
        }

You can check codepen

css html
3 Answers

Perhaps it is not the final result you expect, but is an aproach. What I'm done here is create a .wrapper in order to hide scrollbar (can you see how in the attached CSS). And then just give overflow-y: scroll to the .parent.

If it is not the result you want please come back with more information.

.wrapper {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  overflow: hidden;
}
.parent {
  position: relative;
  width: calc(100% + 20px);
  height: inherit;
  padding-right: 20px;
  overflow: hidden;
  overflow-y: scroll;
}
<div class="wrapper">
    <div class="parent">
        <p class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!</p>
    </div>
</div>

user_183124940

I'm not sure if you need to keep the container at the current size - if you do, then use overflow-y: scroll. Otherwise, here is an alternate styling that doesn't restrict the container to a specific height.

.wrapper {
  width: 200px;
  border: 2px solid black;
  overflow: hidden;
  padding: 1rem;
}
.parent {
  position: relative;
  width: 100%;
  height: inherit;
  padding-right: 20px;
}
<div class="wrapper">
    <div class="parent">
        <p class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!</p>
    </div>
</div>

user_141215810

I don't think I quite get what you want your result to be. But if you just wanna show the bottom of the child you can simply put bottom: 0 on your child since you're using positioning. It's always good to use padding instead of translate, since translate can quicky mess your entire site up.

.parent {
  position: relative;
  border: 2px solid black;
  width: 200px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 10px;
}
.child {
  position: absolute;
  bottom: 0;
  margin: 0;
}
<div class="parent">
  <p class="child">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at exquotenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!
  </p>
</div>

user_161972200
Related