1

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>
biberman
  • 5,606
  • 4
  • 11
  • 35
Alpha2k
  • 2,212
  • 7
  • 38
  • 65

2 Answers2

1

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/

Thaeke Hekkenberg
  • 358
  • 1
  • 10
  • 1
    if you scroll right you will notice some data is displayed under blue background while some other data is displayed under red background. The problem isn't the background, the problem is that the blue background should be 100% width and span across all scrollable content – Alpha2k Aug 15 '20 at 11:37
  • I'm not sure what you mean with "the blue background should be 100% width and span across all scrollable content". Could you clear this up for me? Do you mean horizontal or vertical scrolling content? And 100% width regarding to what? You've set a height and width to the box so the content is indeed 100% width of its parents. – Thaeke Hekkenberg Aug 15 '20 at 11:44
  • @ThaekeHekkenberg A bigger content does overflow, allowing the use of scrollbar. But the parent container should adapt its width depending on the content, not on the parent. "TOP", the yellow bar is displayer correctly since it doesn't overflow, content isn't displayed correctly. – Alpha2k Aug 15 '20 at 11:54
  • Updated the answer. Could you check if this works for your purpose and mark the post as answered if so? – Thaeke Hekkenberg Aug 15 '20 at 20:27
  • Even if you remove the width and height you gave to the .box class? – Thaeke Hekkenberg Aug 16 '20 at 12:35
  • @ThaekeHekkenberg if you believe you can make it work open the jsfiddle, make the changes, save it and share the link back or use the stack overflow sinppet. – Alpha2k Aug 16 '20 at 13:44
  • You're right, here is the jsfiddle. If this is not what you want, I'm afraid I can't do anymore. https://jsfiddle.net/fmdr8w3h/23/ If this does work, I'll change it in the answer with an explanation. – Thaeke Hekkenberg Aug 16 '20 at 14:53
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;
      }
Jaume Castelló
  • 26
  • 1