Overflow:auto scroll bar appears horizontally

the html code is as follows:

<div class="detail-wrapper clearfix">
    <div class="detail-main">
      <div>11111</div>
      <div>11111</div>
    </div>
</div>

the css code is as follows:

.detail
      overflow: auto
      position: fixed
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-color: rgba(7, 17, 27, .7)
      z-index: 10
      .detail-wrapper
        min-height: 100%
        width: 100%
        .detail-main
          padding-top: 1.28rem
          padding-bottom: 1.28rem
          color: -sharpffffff

width is set to 100%, or no width is set, the scroll bar will appear horizontally. How to make the width is the width of the screen, and there is no scroll bar horizontally

Aug.23,2021

the scroll bar can change the internal layout or set the x direction to exceed the hidden

because the contents are larger than the width of the container.
overflow-x: hidden;
overflow-y: auto;

width is equal to screen width:
var w = $(window). Width ()
$('element'). Css ({
'width':w
})
horizontal prohibition of scroll bars:
overflow-x: hidden;


If

is set to overflow: auto; , the content will overflow and a scroll bar will appear.

the method to eliminate the occurrence of scroll bars:

    The
  1. content should be set within the width of the container.
  2. overflow-x: hidden; overflow-y: hidden; or overflow: hidden can hide overflow content.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b357c7-2b7ed.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b357c7-2b7ed.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?