溢出下的 Flexbox 未占用全宽答案

【问题标题】：Flexbox under overflow not taking full width溢出下的 Flexbox 未占用全宽
【发布时间】：2020-12-05 00:07:39
【问题描述】：

我已经在 jsfiddle 中简化了我的 HTML/CSS，这是我想要实现的目标，但没有成功。

我无法让.problem 占据全角。内容由蓝色背景表示，而框本身为红色。

我正在尝试使所有可滚动内容都具有全宽和蓝色背景，因为我猜在可滚动内容之后没有出现背景是宽度问题。

到目前为止我看过的内容：

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

澄清一下：给.problem一个固定的宽度确实给了我想要的效果，但不是解决方案，因为内容是动态的，我不知道它的宽度。

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

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

要允许元素根据内容增长，您可以将 'width' 替换为 'min-width'。这可以确保您的盒子有一定的尺寸以用于造型目的，但允许它增长。然后你可以使用'max-width'来限制它可以增长的数量。

因此，将 'width: 100%' 更改为 'min-width: 100%'。

您可以在这里找到更多信息：https://css-tricks.com/boxes-fill-height-dont-squish/

【讨论】：

如果您向右滚动，您会注意到一些数据显示在蓝色背景下，而其他一些数据显示在红色背景下。问题不在于背景，问题在于蓝色背景应该是 100% 宽度并且跨越所有可滚动内容
我不确定您所说的“蓝色背景应该是 100% 宽度并跨越所有可滚动内容”是什么意思。你能帮我解决这个问题吗？你的意思是水平滚动还是垂直滚动内容？ 100% 的宽度与什么有关？您已为框设置了高度和宽度，因此内容确实是其父项的 100% 宽度。
@ThaekeHekkenberg 更大的内容会溢出，允许使用滚动条。但是父容器应该根据内容而不是父容器来调整其宽度。 “TOP”，黄色条显示正确，因为它没有溢出，内容显示不正确。
更新了答案。您能否检查这是否适合您的目的，如果可以，请将帖子标记为已回答？
即使你删除了你给 .box 类的宽度和高度？

【解决方案2】：

问题是蓝色背景的容器占用了父容器的宽度而不是内容的宽度，要解决这个问题，您可以将其属性“display”更改为“inline-flex”。

然后，如果您将 .cell 类的“flex”属性更改为“width”属性，则您设置的宽度将计入父级，它将到达蓝色容器，使其填充所有内容。

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

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

【讨论】：