溢出下的 Flexbox 未占用全宽

Question

I've simplified my HTML/CSS in a jsfiddle of what I'm trying to achieve without success.

I cannot make the .problem take full width. The content is represented by the blue background while the box itself is red.

I'm trying to make all the scrollable content have full width and a blue background since I guess the background not appearing after the scrollable content is a problem of width.

---

What I've taken a look so far:

Flexbox not full width

Flexbox: how to get divs to fill up 100% of the container width without wrapping?

Fill 100% width of scrolling flex container

---

To clarify: giving .problem a fixed width does give me the effect I want but not the solution since the content is dynamic and I cannot know its width.

 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { width: 100%; height: 100%; }.bg { display: flex; background-color: gray; width: 100%; height: 100%; }.usable { display: flex; height: 90%; width: 100%; background-color: white; }.box { position: absolute; top: 0; left: 0; height: 200px; width: 300px; display: flex; align-items: flex-start; align-content: flex-start; flex-direction: column; background-color: red; }.top { display: flex; height: 20px; background-color: yellow; width: 100%; }.bottom { width: 100%; flex: 0 1 100%; overflow: auto; }.contents { height: 100%; display: flex; flex-direction: column; }.forms { flex: 0 1 100%; }.problem { display: flex; height: 100%; background-color: blue; }.row { display: flex; align-items: center; }.cell { align-self: stretch; flex: 1 0 100px; }

 <div class="bg"> <div class="usable"> <div class="box"> <div class="top"> Top </div> <div class="bottom"> <div class="contents"> <div class="forms"> <div class="problem"> <div class="data"> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 00:21:06</div> <div class="cell">test1</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:26</div> <div class="cell">test2</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:26</div> <div class="cell">test3</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:37</div> <div class="cell">test4</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:37</div> <div class="cell">test5</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:37</div> <div class="cell">test6</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:37</div> <div class="cell">test7</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:58</div> <div class="cell">test8</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:42:58</div> <div class="cell">test9</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> <div class="row"> <div class="cell">2020-06-28 01:34:46</div> <div class="cell">2020-08-13 13:43:11</div> <div class="cell">test10</div> <div class="cell"></div> <div class="cell">Basic User</div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

The problem is that the container with the blue background is taking the width of the parent and not the content, to solve this you can change its property "display" to "inline-flex".

Then if you change the "flex" property of the.cell class to a "width" property the width you set will count for the parent and it will reach the blue container making it fill all the content.

      .problem {
        display: inline-flex;
        height: 100%;
        background-color: blue;
      }

      .cell {
        align-self: stretch;
        width: 100px;
      }

Answer 2

To allow elements to grow according to content, you can replace 'width' by 'min-width'. This makes sure your box is a certain size for styling purposes but allows it to grow. Then you can use 'max-width' to limit the amount it can grow.

So, change 'width: 100%' by 'min-width: 100%'.

You can find more here: https://css-tricks.com/boxes-fill-height-dont-squish/