Search code examples
htmlcssscrolloverflowcss-position

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>
Solution

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