Content won't stay inside div - css

Question

Hope I don't seem like too much of a newbie developer with this problem but I can't for the life of me seem to find the right combination of techniques to get this to work. Essentially, when in mobile view I have a div that populates with image data once searched and when that happens all of my menu icons get pushed somewhere else instead of staying put. Shouldn't the image data be confined to the div? I've tried position absolute, position fixed, overflow:hidden, hard coding the height in pixels, using flex-wrap and other flex properties, among other things. Nothing has worked so far. Check it out here: https://craftyquotes-bja.herokuapp.com/ Click on the camera button, search for any image genre and see what happens. That's the issue. Any hints or pointers in the right direction would be appreciated!

Answer 1

You have a class "pic-render "inside" pic-render", I do not know why, but in my opinion it is not necessary. Add a pair of properties to the nested div tags.
<style>
.form_container {
height: 5vh;
overflow: hidden;
}
.image_container {
height: 63vh;
overflow: auto;
}
</style>
<div class="pic-render">
<div class="form_container">
<form>
<input type="text" autocomplete="off" name="searchValue" placeholder="Search Images">
<button>SEARCH</button>
</form>
</div>
<div class="image_container">
<img src="">
...
<img src="">
</div>
</div>