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

Html css
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.

Previous: The use of wizard plug-in wizard.js

Next: How does php retrieve valid URLs in the text?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu