CSS Как сделать секцию на весь экран с горизонтальным скроллом?

Question

Есть вот такой примитивный html/css

body {
  margin: 0;
}

.main {
  display: flex;
  overflow-x: auto;
}

.main_section {
  background-color: #f00;
  width: 100%;
  height: 100vh;
}

.main_video {
  background-color: #ff0;
  width: 200%;
  height: 100vh;
}

<main class="main">
  <div class="main_section">

  </div>
  <div class="main_video">

  </div>
</main>

Как сделать так, что б секция main_section занимала всю ширишу экрана, и сам этот объект .main мог скролиться по горизонтали, но что б вертикальных скроллов не добавлялось. Пробовал повторить хак с вот этого примера. Но что-то пошло не так. Срабатывает если .main_section {min-width:100vw;} но меня не устраивает качество роботы, без скролла.

Answer 1

Если правильно понял ваш запрос, то вот:

body {
    white-space: nowrap;
    width: 5000px;
    height: 100vh;
    margin: 0;
    overflow-y: hidden;
}

.main {
    display: flex;
    overflow-x: scroll;
    height: 100vh;
}

.main_section {
    background-color: #f00;
    width: 1000px;
    height: 100%;
}

.main_video {
    background-color: #ff0;
    width: 5000px;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>
<main class="main">
  <div class="main_section">

  </div>
  <div class="main_video">

  </div>
</main>
</body>
</html>

Ширину сделал, чтобы показать горизонтальный скролл

БЛОГ НА HUSL

CSS Как сделать секцию на весь экран с горизонтальным скроллом?

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