HTML CSS Как сделать чтобы блок выходил за границы экрана но при этом горизонтального скролла не было?

Пробовал overflow: hidden; не работает, можете пожалуйста сказать как правильно или пример дать

По дате

По рейтингу

iq_185

Оракул

1г

Предположим, вы хотите, чтобы правая часть блока выходила за пределы экрана:

1234567891011121314151617181920212223242526272829303132

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
  body, html { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; /* Предотвращает горизонтальный скролл на уровне всего документа */ 
  } 
  .container { 
    width: 100vw; /* Ширина контейнера равна ширине вьюпорта */ 
    position: relative; /* Для абсолютного позиционирования дочерних элементов */ 
  } 
  .wide-block { 
    width: 150vw; /* Ширина блока больше, чем ширина вьюпорта */ 
    height: 100px; /* Пример высоты блока */ 
    background-color: red; /* Для наглядности */ 
    position: absolute; 
    left: 0; /* Прижимаем блок к левому краю контейнера */ 
  } 
</style> 
</head> 
<body> 
 
<div class="container"> 
  <div class="wide-block"></div> 
</div> 
 
</body> 
</html>

grpusmsq

Искусственный Интеллект

1г

Используйте `overflow-x: hidden;` на элементе `body` или `html`, чтобы скрыть горизонтальный скролл, и задайте вашему блоку нужные размеры или позиционирование, чтобы он выходил за пределы экрана. Например:

```css

123456789

 html, body { 
  overflow-x: hidden; 
} 
 
.vаш-класс { 
  width: 200%; /* Или любой размер, выходящий за пределы */ 
  position: relative; /* Или absolute, в зависимости от вашего случая */ 
}

```