3

I am trying to make a table using flexboxes that is also absolutely positioned. Each row is a standard div with display: flex Each item in each row is the flexed item. Note that there is no width set anywhere.

Why are my background colors so messed up.

flex failing

I noticed that the background extends farther if there is more text in the rows and that the position is calculated from the background which is fine except that the background does not include the whole row.

Tried display: inline-flex and background-size: cover to no avail

https://jsfiddle.net/66f9s2kp/7/

<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 100);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 100);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois asdfasdfasdfasdfasdfasdfthinggyh stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
</div>

Help, for my sanity,

Thanks,

Ryan

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
EpiX
  • 1,281
  • 2
  • 16
  • 22

2 Answers2

4

Your primary div container is absolutely positioned.

As you mentioned: "Note that there is no width set anywhere."

In that case, the width of the absolutely-positioned div will be determined by its content.

div[style*="absolute"] {
  border: 2px dashed red;
}
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois yh stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

revised fiddle demo

The flex items are overflowing the container. But since the background colors are set on the container, the colors end with the container.

One solutions is to set a width on the absolutely-positioned container:

div[style*="absolute"] {
  border: 2px dashed red;
  width: 1000px; /* the sum of flex item widths */
 /* or width: 100% */
 /* or left: 0; right: 0; */
}

* {
  box-sizing: border-box;
}
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

revised fiddle demo

Another solution, in case you don't want to set a width on the container, is to apply the background colors to the items, not the container.

div[style*="absolute"] > div:nth-child(odd) > div {
  background-color: rgb(173, 216, 230) !important;
}

div[style*="absolute"] > div:nth-child(even) > div {
  background-color: rgb(173, 216, 100) !important;
}
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

revised fiddle demo

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thank you Michael_B but I should have mentioned that in this absolute setting I specifically do not want to set the outer containers width. I just want it to grow based on its insides as I will be dynamically adding and removing columns and do not want to have to recalculate the outer width every time, hence the flexbox. – EpiX Aug 10 '17 at 00:21
  • "in that case, the width of the absolutely-positioned div will be determined by its content." So what specifically is setting the width? cause it seems so arbitrary how it just stops. – EpiX Aug 10 '17 at 00:23
  • haha found the answer and its by YOU! turns out its a 2 years old bug.....https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width under Browser Bugs – EpiX Aug 10 '17 at 00:43
  • I posted a second solution, that doesn't require a width set on the container. – Michael Benjamin Aug 10 '17 at 00:49
  • I had to remove the second example from each snippet, since the answer was exceeding character limits. – Michael Benjamin Aug 10 '17 at 00:50
  • Oh, yeah, I had forgotten about that. I even spent some time researching another question, when I could have just referred to my previous answer. LOL! https://stackoverflow.com/q/45482350/3597276 – Michael Benjamin Aug 10 '17 at 00:52
1

Use width instead of flex-basis and the parent will grow to fill the parent, versus the children overflowing from the parent.

<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois yh stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • True, but WHY does flex fail? the posted code is actually a snippet for a tableViewer object i created to draw tables. I want the tableViewer to be able to be inside the standard page (inline, block, etc. which works as expected with flex) AND also in the absolute setting. flex: 0 0 200px; should be basically the same as width right? – EpiX Aug 10 '17 at 00:17
  • @RyanLee I'm assuming `flex-basis` doesn't give the flex parent the same layout on the page as using `width`, but I don't know why, first time I've seen this. I would need to read the spec and see if I can figure it out. I can delete the answer if you don't find the solution helpful. – Michael Coker Aug 10 '17 at 00:31
  • @@michael tbh the solution is not helpful but no need to delete :) – EpiX Aug 10 '17 at 00:33
  • Turns out this answer may have been correct after all. The explanation is in the Browser Bugs section here: https://stackoverflow.com/a/34355447/3597276 – Michael Benjamin Aug 10 '17 at 01:17
  • 1
    @Michael_B sweet, thanks! Bookmarked. You're the flexbox master :) – Michael Coker Aug 10 '17 at 02:17