CSS Как правильно задать overflow?

Question

.slider {
  max-width: 300px;
  width: 100%
  height: auto;
  overflow-x: hidden;
  position: relative;
  border: 1px solid #000;
}
.slider-rect {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: -11px;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 background: #333;
}

<div class="slider">
  <div class="slider-block">
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    SLIDE<br>
    <div class="slider-rect"></div>
  </div>
</div>

Как убрать скрол по оси Y? У меня блок .slider-rect должен выходить за границу родительского блока с позицией absolute, так же есть у родителя overflow-x:hidden; Почему он скрывает часть блока? Как это можно исправить?

Answer 1

overflow обрезает и скрывает те элементы, что выходят за его пределы.
В вашем случае, если я правильно понял, вы хотите оставить серый круг целым, но в границах родителя.
Но ваш круг находится внутри, следовательно он будет обрезаться.

Решение:
Обернуть дочерние элементы, кроме круга, и обёртке задать overflow

.slider {
  max-width: 300px;
  width: 100%;
  height: auto;
  position: relative;
  border: 1px solid #000;
}

.slider .wrap {
  overflow: hidden;
  max-height: 100%;
}

.slider-rect {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #333;
}

<div class="slider">
  <div class="slider-block">
    <div class="wrap">
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
      SLIDE<br>
    </div>
    <div class="slider-rect"></div>
  </div>
</div>

БЛОГ НА HUSL

CSS Как правильно задать overflow?

Ответы (1 шт):