Css переполнение скрыто не будет работать, несмотря на относительную позицию для родителя

Question

Я хотел бы скрыть некоторую часть дочернего элемента, чтобы все, что находится за пределами родительского контейнера, не было видно (поэтому часть моего изображения должна быть обрезана по высоте контейнера)

Я следил за лотомна форумах ответили, что сказали поставить контейнер относительно (мой должен быть относительным, чтобы это не было проблемой)

.img-container {
  margin : auto;
  overflow:hidden;
  width:250px;
  position: relative;
  height: 250px;
  border : 5px dotted gray;
}

.img-container object, .img-container img{
  position : absolute;
  display: inline-block;
}

.img1{
  top : 0px;
  left : 0px;
  width:60%;
}

.img2{
  width: 52%;
  left :120px;
  top:50px;
}

<div class="img-container">
  <object class='img1' data='https://svgshare.com/i/6Pz.svg'>

  </object>
  <object class='img2' data='https://svgshare.com/i/6Pz.svg'>

  </object>
</div>

https://jsfiddle.net/u0upm3j3/2/

ОТВЕТ:

Ну, хорошо ... Что-то, чего я не понимаю: эторабота сейчас.

Что я сделал?Ничего, кроме перезапуска Chrome.

Спасибо вам D3nj, Cavdi за ваш ответ и Creaforge и Daniel за комментарии, извините, что заставляете вас немного терять свое время.Но на самом деле, я не понимаю, как это может работать сейчас и не раньше ...

Пример в позе работает хорошо.

Answer 1

img-container {
  margin : auto;
  overflow-x: hidden;
  overflow-y: hidden;
  width:250px;
  position: relative;
  height: 250px;
  border : 5px dotted gray;
}

.img-container object, .img-container img{
  position : absolute;
  display: inline-block;
}

.img1{
  top : 0px;
  left : 0px;
  width:60%;
}

.img2{
  width: 52%;
  left :120px;
  top:50px;
}

Answer 2

используйте это как правило в вашем css и уберите переполнение из стиля изображения

*, html, body {
   overflow-x: hidden;
}