Changing the div width

See more:

CSS3

HTML5

Now the problem is when I go in responsive mode and make it responsive, I don't want this div to shrink with page shrinking. I only want it to be responsive when the page reaches its width.

<div class="container">
        <div class="container2">
            <a href="https://www.google.com">Explore</a>
            <img src="cont.jpg">
        </div>
</div>

.container{
      border: 2px solid red;
      overflow: hidden;
      height: 16%;
      width: 70%;
      margin: auto;
      position: relative;
  }

.container div{
      border: 2px solid black;
      display: inline-block;
  }
.container2{
    
    margin-right: 250px ;
    float: right;
    /* flex-shrink: unset; */
    width: 24vw;
    height: 99%;
    position: relative;
  }

  .container2 a{ 
      background-color: white;
    border: 2px solid white;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
    padding: 12px 18px;
    text-decoration: none;
    transition: background-color .3s;
  }

.container2 a:hover{
      background-color: transparent;
      color: white;
  }

.container2 img{
    object-fit: cover;
      height: 100%;
      width: 100%;
  }

What I have tried:

I have tried many things like giving the height in % or something but nothing gets in my mind. Help me out here.