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, Jul 11 '18 at 15:21

score 2 · Answer 1 · answered Jul 11 '18 at 12:44

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>

Sorry, I didn't mention that I want to use transition, so this solution is not what I need — RusBes, Jul 11 '18 at 13:17

Matthias Schmidt · Accepted Answer · 2018-07-11T15:12:58.207

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/

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. — CBroe, Jul 11 '18 at 12:50

CSS. Position and overflow

2 Answers2