Flex items not responsive

[JJM]

Currently what I’m trying to achieve is this:

I am using display: flex attribute to achieve this. Currently the code works fine in a wide screen, but when I resize it to a smaller screen, the layout gets messed up like so:

I’ve used the following code:

<div class="flexbox-container" style={{backgroundColor:"#0e2043"}}>
        <div style={{padding:"30px"}}>
          <div class="video-item video-item-1" style={{paddingLeft:"60px"}}>
            <h1 style={{color:"#fff"}}>How to get your second passport?</h1>
            <p style={{color:"#fff", paddingTop:"30px", textAlign:"justify"}}>Random Content</p>
          </div>
        </div>
        <div style={{padding:"30px"}}>
          <div class="video-item video-item-2">
            <video controls></video>
          </div>
        </div>
      </div>

CSS:

.flexbox-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flexbox-item{
  width: 300px;
  height: 400px;
  border-radius: 10px;
  background-color: #fff;
}

.video-item{
  width: 50%;
  height: 200px;
 
}

.video-item-1{
  width: 40vw;
}

.video-item-2{
  border-radius: 10px;
  width: 40vw;
  background-color: #1b1b1b;
}

.flexbox-item-1{
  min-height: 400px;
}

.flexbox-item-2{
  min-height: 400px;
}

.flexbox-item-3{
  min-height: 400px;
}

[ilenia]

Please give more infos on what you are using, I can’t reproduce your page just copying your html and css

[JJM]

exciting-zhukovsky-oq360 - CodeSandbox Here is a sandbox link

[ilenia]

you have used fixed heights, but the text overflows out of it, I think that’s the issue