CSS. Position and overflow

Question

I have created a simple demo of my problem.

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: -20px;
  background: yellow;
}
.set-overflow:hover .element{
  bottom: 0;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

I have two parents and element, which should appear on parent's hover. The problem is that I have to get rid of scroll without changing parents' properties.

Please note that it is just a simple example, so I have to solve this with minimum possible effect on the other elements. Thanks!

JSFiddle: https://jsfiddle.net/o0abLxek/15/

I didn't get that you want to use a transition on this element. Updated my answer, maybe it helps...? — Matthias Schmidt
– Matthias Schmidt, Commented Jul 11, 2018 at 15:21

Temani Afif · Accepted Answer · 2018-07-11 12:44:01Z

2

make your child element to be height:0 on non-hover state:

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  height:0;
  overflow:hidden;
  background: yellow;
}
.set-overflow:hover .element{
  height:auto;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

answered Jul 11, 2018 at 12:44

Temani Afif

280k30 gold badges380 silver badges506 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RusBes Over a year ago

Sorry, I didn't mention that I want to use transition, so this solution is not what I need

Matthias Schmidt · Accepted Answer · 2018-07-11 15:12:58Z

1

Edited answer: Learning that you want to use a transition on the element (I'm guessing you want to make it slide up), I've updated my answer. height won't help you as you can't use transition on height, but you could use max-height instead, as pointed out in this question (How can I transition height: 0; to height: auto; using CSS?).

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  max-height:0;
  overflow:hidden;
  background: yellow;
  transition: max-height 1s;
}
.set-overflow:hover .element{
  max-height:100px;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

Old answer: Instead of moving the element around on hover, why don't you use plain old visibility? Like so: https://jsfiddle.net/wpxehqkb/

edited Jul 11, 2018 at 15:12

answered Jul 11, 2018 at 12:45

Matthias Schmidt

6262 gold badges12 silver badges28 bronze badges

1 Comment

C3roe Over a year ago

Or display, that was my first thought as well. But maybe they want to add a transition to make it “move in” later on or sth. like that.

Collectives™ on Stack Overflow

CSS. Position and overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related