Im facing a problem with a flexbox and wrapping the items. I'm working with react and mui, but for convenience I've written the example code in plain html and css. But if you know a solution in mui/react then let me know too ;) The code can be found here: https://codepen.io/andieis/pen/mdjjoRv.
<div id="wrapper">
<div id="content-left">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div id="content-right">
<div id="fixed"><img
src="https://thumbs.dreamstime.com/b/example-rubber-stamp-grunge-design-dust-scratches-effects-can-be-easily-removed-clean-crisp-look-color-easily-85561254.jpg" />
</div>
</div>
</div>
* {
margin: 0;
}
#wrapper {
display: flex;
}
#content-left {
background-color: yellow;
display: flex;
flex-wrap: wrap;
flex: 1;
gap: 30px;
}
.card {
width: 400px;
height: 300px;
background-color: blue;
}
#content-right {
background-color: red;
flex: 1;
}
#fixed {
position: fixed;
top: 0;
right: 0;
}
I would like to have the following result: On the right side are some cards. The should be scrollable, when there are more items than it could display. On the right side is another container which contains a map. This should not be scrollable. If I scroll on the left side the map (or in the example the image) should remain while I scroll on the left. The biggest question now is the following: How can I remove the yellow vertical line between the cards and the red image? If it wraps, the width of the map should be adjusted, so that no vertical yellow line is there. Does anyone have an idea how I could achieve this?
I don't want to use space-between, space-evenly or something like this. It should change the size of the map and not the gaps between the cards.
Thanks a lot for your help!