overflow-x делает данные p-тега из коробки на карте?

Question

Это код html и css, позволяющий элементам размещаться в режиме прокрутки, когда на моей странице несколько таких списков. В настоящее время проблема в том, что тег p данных выходит из всего элемента div, когда я применяю элемент overflow-x. Я создал элемент div, в который я добавил тег p и тег изображения, и присвоил свойству overflow свойство div. класс

  <div class="container-fluid scrollmenu">
      <div class="row text-centre">
        <div class="scroll-data">

        <div class="col-xs-4 col-sm-6 col-md-4">
            <img class="d-block w-100 card-img-top" src="./Images/banner-1.jpg" alt="First slide">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="col-xs-4 col-sm-6 col-md-4">
          <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
      <div class="col-xs-4 col-sm-6 col-md-4">
        <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
      <div class="col-xs-4 col-sm-6 col-md-4">
        <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
      <div class="col-xs-4 col-sm-6 col-md-4">
        <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
      <div class="col-xs-4 col-sm-6 col-md-4">
        <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
      <div class="col-xs-4 col-sm-6 col-md-4">
        <img class="d-block w-100" src="./Images/banner-1.jpg" alt="First slide">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
           Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>  
    </div>
      </div>
    </div>

    Css

    .container-fluid .row .scroll-data { 
        overflow-x:auto; 
        white-space: nowrap; 
        display: flex;


    } 

    .container-fluid .row .scroll-data .col-xs-4 p
    {
        word-wrap: break-word;
        color: blueviolet;

    }

Answer 1

Почему у вас white-space: nowrap на контейнере? Это заставляет ваш текст не переноситься. Удалите это, и оно должно работать.

.container-fluid .row .scroll-data { 
    overflow-x:auto;  
    display: flex;
}