Помогите решить задачку с HTML и CSS с независимым блоком

Question

Исходные:

<style>
   .scheme{
      min-width: 750px;
   }
</style>

<div class="all">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 ">
                <p>content</p>
            </div>
        </div>
    </div>
    <div class="scheme">

    </div>
</div>

Есть блок .container. Это контейнер Bootstrap. При изменении ширины экрана в меньшую сторону, он пропорционально уменьшается.
Есть блок .scheme. В этом контейнере будет контент, который не имеет права изменять свои размеры после ширины экрана 750px

Требуется:

При достижении экрана от 750 и ниже блок Bootstrap работает как и положено
Блок .scheme должен остаться в ширине не менее 750 px, но при этом должна появиться прокрутка по ширине только для этого блока. То есть вся страница работает под сеткой Bootstrap, а этот блок не мешает странице масштабироваться и в то же время у пользователя есть возможность его просматривать при помощи горизонтальной прокрутки.

Answer 1

.scheme {
  min-width: 750px;
}

@media (max-width: 992px) {
  .overflow-x-scroll {
    overflow-x: scroll!important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="all">
  <div class="container bg-info">
    <div class="row">
      <div class="col-xs-12 ">
        <p>content</p>
      </div>
    </div>
  </div>
  <div class="container overflow-x-scroll p-0">
    <div class="scheme bg-primary">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

БЛОГ НА HUSL

Помогите решить задачку с HTML и CSS с независимым блоком

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