0

I'm trying to get my flex box container to fit within the div
I've even set min-width: 0 and overflow: hidden on everything in an act of desperation
but the flex box still isn't shrinking when the width is changed
This is what it looks like when the width is changed

https://jsfiddle.net/o5c76hy2/25/ enter image description here

* {
  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>

I've refered to other links like:
Flex child is overflowing the parent container even after setting min-width:0?
Why don't flex items shrink past content size?

but I still can't seem to fix the problem, I'm pretty sure it's something obvious but I can't seem to pin point it, any help would be severely appreciated

cak3_lover
  • 1,440
  • 5
  • 26
  • 1
    The code here doesn’t match your fiddle, in there you have explicitly specified the width for the first item as 50% (and with different class names as well.) Not sure what exactly you _want_ to achieve here now, so please clarify that. – CBroe Mar 08 '21 at 14:07
  • 1
    display:table is the culprit, remove it – Temani Afif Mar 08 '21 at 14:08
  • @Temani Afif I removed the `display:table` but now it's causing a different issue like overflow and top whitespace https://jsfiddle.net/0d5q8uma/2/ – cak3_lover Mar 08 '21 at 20:02

1 Answers1

0

In #maincontainer remove display: table;, and change width: 50%; to width: calc(50% - 200px);. The end result should look like this:

#mainContainer {
  width: calc(50% - 200px);
  background-color: yellow;
  margin: auto;
  padding-left: 100px;
  padding-right: 100px;
  height: 100%;
}
Maciej Bledkowski
  • 604
  • 9
  • 26