CODEWITHSUNDEEP
htmlcssscrolloverflowcss-position
Zombani
Zombani

Reputation: 145

Why doesn't overflow: hidden work with div

I don't why I set overflow: hidden, my div is still scrollable. Pls tell me why

.myDiv {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

Adding html structure

  <div className="myDiv">
     <div className='imgBx'>
        {/* img content inside */}
     </div>
     <div className='post'>
        {/* post content inside */}
     </div>
  </div>

Upvotes: 1

Views: 1626

Answers (2)

Codenatial Developer
Codenatial Developer

Reputation: 318

You can overflow: hidden !important; for avoid other ovverriden styles

.myDiv {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden !important;
}

Upvotes: 1

Muhammad Angga Oktaharisetia
Muhammad Angga Oktaharisetia

Reputation: 23

For allowing scroll bar. These two CSS properties can be used to hide the scrollbars:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

Upvotes: 0

Related Questions