Struggling to make my flex box container fit in the div
Despite setting min-width: 0 and overflow: hidden as a last resort
the flex box simply won't shrink when the width changes
Check out what happens when the width is adjusted:
https://jsfiddle.net/o5c76hy2/25/
https://i.sstatic.net/VuIZn.png
* {
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
}
#header {
width: 100%;
height: 100px;
background-color: black;
color: white;
position: relative;
}
#mainContainer {
display: table;
width: 50%;
background-color: yellow;
margin: auto;
padding-left: 100px;
padding-right: 100px;
height: 100%;
min-height: 100%;
max-height: 100%;
min-width: auto;
}
.subContainer {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
align-items: center;
display: flex;
min-width: 0;
overflow: hidden;
}
.item1 {
margin-right: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
min-width: 0;
}
.item2 {
background-color: orange;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
margin: 5px;
min-width: 0;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="header"></div>
<div id="mainContainer">
<div class="subContainer">
<span class="item1">aaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="item2" style="background-color: red;">bbb</span>
<span class="item2" >c</span>
</div>
</div>
</body>
</html>Have looked at other resources like:
Flex child is overflowing the parent container even after setting min-width:0?
Why don't flex items shrink past content size?
Cannot seem to solve this issue, it's probably something obvious that I'm missing, any assistance would be greatly appreciated