How to make sure that a inner div does not go outside its container div flexbox with CSS/HTML only?

Question

I am trying to insert content inside of an inner div (in this case an image), however despite having set the max-width and width and max-height and height of the container div (flex container), the inner div still goes outside the boarders covering the other elements (outside its own div).

How to make sure that any content I put inside of a div will never go outside the maximum area I am assigning to it with CSS or HTML?

In this case when I click my messages from the left navbar this is what I get:

const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i++) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i++) {
      if (ProfileForm[i].style.display == "block" && ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  border: thick dotted yellow;
  margin-bottom: 18%;
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  border: thick dotted red;
  flex: 1;
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick dotted green;
  flex: 1;
  width: 666px;
  max-width: 666px;
  height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.utilities_elements,
.utilities_image {
  /*border: thin solid red;*/
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  cursor: pointer;
}

.properties_dashboard_container {}

.properties_detail_widget {
  border: thin dotted #003580;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*border: thin solid red;*/
  flex-wrap: nowrap;
}

.property_details {
  margin-left: -6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 333;
  text-align: center;
}

.properties_detail_label {
  margin-left: 6px;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.prop_detail {
  max-width: 450px;
  max-height: 250px;
  margin: 33px;
  border: thick solid #003580;
}

.property_image_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image_wrapper {
  border: thick dotted purple;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image {
  border: thick dotted gray;
  max-width: 666px;
  max-height: 666px;

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <!--        <meta http-equiv="refresh" content="3" >-->
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="prague">Prague</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a>

Answer 1

Not Sure if its what you are looking for.

Updated .msg_image_wrapper as seen below, this will force the image to conform to a specific height set by max-height property.

.msg_image_wrapper {
  border: thick dotted purple;
  /*display: flex;
  justify-content: space-around;
  align-items: center;*/
  
  display: block; /* Added item */
  max-height: 350px; /* Added item */
  overflow: auto; /* Added item */
}

const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i++) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i++) {
      if (ProfileForm[i].style.display == "block" && ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  border: thick dotted yellow;
  margin-bottom: 18%;
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  border: thick dotted red;
  flex: 1;
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick dotted green;
  flex: 1;
  width: 666px;
  max-width: 666px;
  height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.utilities_elements,
.utilities_image {
  /*border: thin solid red;*/
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  cursor: pointer;
}

.properties_dashboard_container {}

.properties_detail_widget {
  border: thin dotted #003580;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*border: thin solid red;*/
  flex-wrap: nowrap;
}

.property_details {
  margin-left: -6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 333;
  text-align: center;
}

.properties_detail_label {
  margin-left: 6px;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.prop_detail {
  max-width: 450px;
  max-height: 250px;
  margin: 33px;
  border: thick solid #003580;
}

.property_image_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image_wrapper {
  border: thick dotted purple;
  /*display: flex;
  justify-content: space-around;
  align-items: center;*/
  
  display: block; /* Added item */
  max-height: 350px;
  overflow: auto;
}

.msg_image {
  border: thick dotted gray;
  max-width: 666px;
  max-height: 666px;

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <!--        <meta http-equiv="refresh" content="3" >-->
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="prague">Prague</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: n