How do I make content fit the grid cells/div perfectly?

Question

So I don't know why I'm having such trouble making sure the contents fit its div. Here's what I have so far

<div id="container" class="charts-wrapper chart-container">  
  <div class="main-chart-container ">
    <img src = "https://picsum.photos/id/288/300/200" class = 'img-responsive mainn-chart'/>
  </div> 
  <div class="minor-chart-container">
      <img src = "https://picsum.photos/id/237/300/200" class = 'img-responsive mainn-chart'/>
  </div>
</div>

Just as a note, solutions like background-image will not apply as they're actually just placeholders for other component code I'm looking into.

.charts-wrapper{
    display: grid;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    grid-template-columns: 35fr 10fr;
    column-gap: var(--dds-spacing-m);
    align-items: stretch;
    align-content: stretch; 
    height:100%;
    background-color:yellow;
    opacity:80%;
}
.main-chart-container{
    border: 5px solid red;
    grid-column: 1;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    height: 100%;
    width: 100%;
    background-color:green;
    opacity: 40%;
}

.main-chart-container .mainn-chart{
    align-self:stretch;
}

.minor-chart-container{
    border: 5px solid red;
    grid-column: 2;
    // position: absolute;
    display:flex;
    top: 0;
    left: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    // background-color:blue;
    opacity: 40%;
}

There's a lot of bloat code in the css sorry, I know- it was a result of my experiments.

Here are some pictures to describe what I'm trying to accomplish.Widget1 Expanded Widget As you can see here, when the widget expands, the grid expands as expected, and the image does have resizing capabilities, but I would like to make sure the image expands to the size of the grid cells. How would I change my CSS to accomplish this? Background-image will not help me here as the image is actually just a placeholder for the actual content I want to show which, if it helps, are both dx-charts from devextreme. We do not believe it's a devextreme chart issue, as it expands fine when it's the only chart in the widget.

Answer 1

You can use this code

        body {
            margin: 0;
            padding: 0;
            background-color: #ffff00;
        } 
        .charts-wrapper{
            display: grid;
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            grid-template-columns: 35fr 10fr;
            column-gap: var(--dds-spacing-m);
            align-items: stretch;
            align-content: stretch; 
            height:500px;
            background-color:yellow;
            opacity:80%;
            width: 100%;
        }
        .main-chart-container{
            border: 5px solid red;
            grid-column: 1;
            display:flex;
            align-items:flex-start;
            align-content:flex-start;
            height: auto;
            width: 100%;
            background-color:green;
            opacity: 40%;
        }
        .main-chart-container .mainn-chart{
            width: 100%;
            height: 490px;
        }
        .minor-chart-container{
            border: 5px solid red;
            grid-column: 2;
            position: absolute;
            display:flex;
            top: 0;
            right: 0;
            bottom: 0;
            height: auto;
            width: 90%;
            background-color:blue;
            opacity: 40%;
        }
        .minor-chart-container img{
            width: 100%;
        }

    <div id="container" class="charts-wrapper chart-container">  
        <div class="main-chart-container">
            <img src="https://picsum.photos/id/288/300/200" class='img-responsive mainn-chart'/>
        </div> 
        <div class="minor-chart-container">
            <img src="https://picsum.photos/id/237/300/200" class='img-responsive mainn-chart'/>
        </div>
    </div>