content overflowing from css grid

Question

Problem: I am having a problem with sizing images inside css grid column/rows. I essentially object-fit: contain the imagesinside their individual cells.

1. The image in "SPOT 4" is not filling the given space
2. If you uncomment the image in "SPOT 1", it will cover the entire grid and is not confined to its own css grid cell.

I have tried setting max-width, object-fit and others on the video level and .channel-container level with no success.

Background: The .parent-trap css class is just an example height/width. This will vary, it may be the entire browser window, or it may be small so I cannot depend on any specific min/max dimensions. There are also other .display4 in the full version that sometimes shows a single video that fills the whole grid, side by side that only shows 2 at a time etc, so any specific dimensions also tend to break individual .display*

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
}

.parent-trap {
  height: 540px;
  width: 960px;
}

/* container for player */
.video-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
}

/* container for plaback control bar */
.container-controls {
  height: 50px;
  background-color: red;
}

/* contains all the .channel-container s */
.channel-layout-container {
  display: grid;
  background: #000;
  background-color: blue;
  flex: 1;
}

/****
**** FIX HERE
****/

.channel-container {}

img {}

/** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */

/** display4 **/
.channel-layout-container.display4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.channel-layout-container.display4 .channel-container:nth-child(n+5) {
  flex: none;
  display: none;
}

<!-- try restricting various sizes -->
<div class="parent-trap">

  <!-- the classcommes that need to be transferred back over-->
  <div class="video-player">
    <div class="channel-layout-container display4">
      <div class="channel-container" style="background-color: khaki;">
        <!-- <img src="https://w.wallhaven.cc/full/3z/wallhaven-3zgz2y.png" />-->

      </div>
      <div class="channel-container" style="background-color: lavender;">
        SPOT 2
      </div>
      <div class="channel-container" style="background-color: lightcoral;">
        SPOT 3
      </div>
      <div class="channel-container" style="background-color: lightseagreen;">
        <img src="https://www.google.com/favicon.ico" />
      </div>
    </div>
    <div class="container-controls">
      common controls and other info goes here
    </div>
  </div>
</div>

Answer 1

Your issue results from your grid template definition.

Replace 1fr 1fr with repeat(2, minmax(0, 1fr)).

The reason for your problem is that 1fr effectively means minmax(auto, 1fr). minmax works such that if the first argument is greater than the second, the whole minmax expression is replaced by the first argument, so your whole definition becomes

grid-template-columns: auto auto;
grid-template-rows: auto auto;

Setting minmax(0, 1fr) prevents this and effectively sets what you did by setting min-width/-height to 0.

Answer 2

I ended up needing 3 things, I'm not entirely sure what the min-width/height: 0 are doing to fix my issue but it works

        .channel-layout-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        .channel-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        img {
            display:block;
            width :100%;
            height:100%;
            object-fit:cover;

        }

html,
body {
    border: 0;
    margin: 0;
    height: 100%;
}

.parent-trap {
    height: 540px;
    width: 960px;
}

/* container for player */
.video-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
}

/* container for plaback control bar */
.container-controls {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    background-color: red;
}

/* contains all the .channel-container s */
.channel-layout-container {
    display: grid;
    background: #000;
    background-color: blue;
    flex: 1;
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

/****
**** FIX HERE
****/

.channel-container {
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

img {
    display:block;
    width :100%;
    height:100%;
    object-fit:cover;

}

/** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */

/** display4 **/
.channel-layout-container.display4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.channel-layout-container.display4 .channel-container:nth-child(n+5) {
    flex: none;
    display: none;
}

<div class="parent-trap">

    <!-- the classcommes that need to be transferred back over-->
    <div class="video-player">
        <div class="channel-layout-container display4">
            <div class="channel-container" style="background-color: khaki;">
                <img src="https://w.wallhaven.cc/full/3z/wallhaven-3zgz2y.png" />

            </div>
            <div class="channel-container" style="background-color: lavender;">
                SPOT 2
            </div>
            <div class="channel-container" style="background-color: lightcoral;">
                SPOT 3
            </div>
            <div class="channel-container" style="background-color: lightseagreen;">
                <img src="https://www.google.com/favicon.ico" />
            </div>
        </div>
        <div class="container-controls">
            common controls and other info goes here
        </div>
    </div>
</div>

You can see now that changing .parent-trap dimensions keep the proper proportions , control bar is always available and just the displays adjust as necessary.