Image overflowing outside a div

June 30, 2022

I have a container with the left side and right side. i have an image on the right side and it is overflowing hence the experience is bad.

I tried putting overflow: hidden but it is still going outside the box. I want the Right side to have a max-width of 50vw and anything that goes past it should be hidden.

What am I doing wrong?

.halfcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 20px;
 }
 
 
  .righthalf{
    overflow: hidden;
   max-width:50vw;
  }
  
    .hero__image {
    display: block;
    position: absolute;
    width: 70%;
    top:10%;
    right: -30%;
    overflow: hidden;
  }

  <section >
        <div   class="halfcontainer">
        <div class="lefthalf">
            <h1>Hello world</h1>
        </div>
        <div class="righthalf">
          <img class="hero__image" src="images/hero.webp" />
        </div>
    </div>
            </section>

>Solution :

Just add Overflow hidden to parent div .halfcontainer

.halfcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 20px;
  position:relative;
  overflow-x:hidden;
 }
 
 
  .righthalf{
    overflow: hidden;
   max-width:50vw;
  }
  
    .hero__image {
    display: block;
    position: absolute;
    width: 70%;
    top:10%;
    right: -30%;
    overflow: hidden;
  }

<section >
  <div   class="halfcontainer">
  <div class="lefthalf">
      <h1>Hello world</h1>
  </div>
  <div class="righthalf">
    <img class="hero__image" src="
https://picsum.photos/seed/picsum/200/300" />
  </div>
</div>
      </section>