Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.

for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.

Here is the Codepen demo

.parent {
  background-color: green;
  width: fit-content;
  max-width: 100%;
  overflow: scroll;
}

.child {
  padding: 30px;
  width: 700px;
  background-color: red;
  color: #fff;
}

<div class="parent">
  <div class="child">
    test string
  </div>
</div>

ps: I’ve added bg colors just for reference purposes, to show whether the parent component is expanding or not.

How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).

Pseudo-Code:

HTML:

<div class="image-container">
  <img width="1000">
</div>

CSS:

.image-container {
  /* ??? */
  display: inline-block; /* ??? */
  overflow: auto;
}

EDIT: Per Evadore’s answer, I was able to come up with the following CSS.

.image-container {
  display: inline-block;
  overflow: auto;
}

/* optimize these px dimensions, 900 worked for my application */
@media (max-width: 900px) {
  .image-container {
    max-width: 710px;
  }
}

/* redundant, I plan to tweak this range later */
@media (min-width: 901px) and (max-width: 1575px) {
  .image-container {
    max-width: 710px;
  }
}

@media (min-width: 1576px) {
  .image-container {
    max-width: 1385px;
  }
}

The following reference also helped: w3schools