Вложенный div в сетке css выходит за пределы родительского div?

Question

Вложенный div в сетке css выходит за пределы родительского div. Как я могу это исправить? Я пробовал переполнение: авто скрыто, но ни один из них не работает на правом правиле. Он выходит наружу для маленького экрана, такого как мобильный телефон для настольного компьютера и iPad, и работает нормально.

код

<div class="projects-grid">
  <div class="leftnested">
    <div style={{display: 'flex', justifyContent: 'space-between'}}>
    <div>
      <img src={require('../assets/mobile app/Screenshot_3.png')}
      style={{objectFit: 'contain', height: 300}}
      />
    </div>
    <div>
      <img src={require('../assets/mobile app/Screenshot_1.png')}
      style={{objectFit: 'contain', height: 300}}
      />
    </div>
    <div>
      <img src={require('../assets/mobile app/Screenshot_4.png')}
      style={{objectFit: 'contain', height: 300}}
      />
    </div>
  </div>
  <div style={{display: 'flex', justifyContent: 'center'}}>
  <img
    alt="playstore"
    src={require('../assets/playstore.png')}
    style={{width: 150, height: 60}}
  />
</div>
</div>
<div class="rightnested">
  <p>Project content</p>
  <p>Project content asdasdghasgdhasgdhgahs
    sadajsdhjahsdjahjsda

  </p>
  <p>Project content asdasdghasgdhasgdhgahs
    sadajsdhjahsdjahjsda
    sajdajsdhkajhdjashdkja

  </p>
  <p>Project content asdasdghasgdhasgdhgahs
    sadajsdhjahsdjahjsda

  </p>
  <p>Project content asdasdghasgdhasgdhgahs
    sadajsdhjahsdjahjsda

  </p>
</div>
</div>

CSS

.projects-grid {
  display: grid;
  grid-gap: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  grid-template-columns: repeat(auto-fit, minmax(400px, auto));
  height: auto;
  margin: 25px;
}

.rightnested {
  margin: 10px;
  background-color: blue;
  overflow: auto;
}

.leftnested {
  margin: 10px;
}

https://jsfiddle.net/k6Loujx1/

для маленького экрана выходя на улицу.

Answer 1

In:

.projects-grid {
display: grid;
grid-gap: 1em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-template-columns: repeat(auto-fit, minmax(400px, auto));
height: auto;
margin: 25px;}

замените

grid-template-columns: repeat(auto-fit, minmax(400px, auto));

на

grid-template-columns: repeat(auto-fit, minmax(200px, auto));

Он все равно будет разрываться на ширине 200 пикселей, но он должен охватывать любое разрешение мобильного телефона .