It seems like it should be straightforward to achieve with bootstrap/grid, but I seem to be overlooking something. I have a container div with two column divs within it. Once the screen size hits a certain point, I want the container to transition directly from the expanded size (780px in this case) to the compact size (just enough for the viewport div, approximately 620px). While I can get the internal divs to behave correctly, the container div sort of "slides" from the expanded size to the compact size. I'd prefer it to switch abruptly between one width or the other.
Here's my HTML:
<div id="mc-container" class="d-flex flex-row flex-wrap">
<div id="mc-header">Title Bar</div>
<div id='mc-viewport'>Viewport</div>
<div id="mc-column">
<div id='mc-list' class="d-flex flex-row flex-wrap">
<div *ngFor="let l of list">
<div id="mc-list-item">{{l}}</div>
</div>
</div>
<div id="mc-controls" class="d-flex flex-row flex-wrap">
<div class="control-placeholder" style="width: 150px">Input Box</div>
<div class="control-placeholder" style="width: 75px">Fan</div>
<div class="control-placeholder" style="width: 75px">Net New</div>
<div class="control-placeholder" style="width: 150px">Download DXF</div>
</div>
</div>
</div>
And here's my CSS:
#mc-container {
background-color: #ccccff;
margin: 5px;
max-width: 780px;
width: 90%;
}
#mc-column {
background-color: #dddddd;
min-width: 150px;
width: auto;
height: auto;
margin: 10px;
margin-right: 0px;
max-width: 600px;
flex: 1 1 0;
}
#mc-viewport {
background-color: lightsalmon;
width: 600px;
height: 400px;
margin: 10px;
margin-right: 0px;
}
#mc-list {
background-color: lightcyan;
width: 100%;
}
#mc-list-item {
min-width: 150px;
outline: whitesmoke solid 1px;
}
#mc-controls {
background-color: lightgreen;
width: 100%;
margin-top: 10px;
margin-bottom: auto;
}
.control-placeholder {
outline: whitesmoke solid 1px;
font-size: small;
}
#mc-header {
background-color: whitesmoke;
width: 100%;
}