Why doesn't overflow: hidden work with div-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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;
}