溢出下的 Flexbox 不占用全宽

Question

我已将我的 HTML/CSS 简化为 jsfiddle 我试图实现但未成功的目标。

我无法让 .problem 占满宽度。内容由蓝色背景表示，而框本身是红色的。

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

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

澄清一下： 给 .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>

Answer 1

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

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

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

Answer 2

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

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

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

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

溢出下的 Flexbox 不占用全宽

Flexbox under overflow not taking full width

html

css

overflow

flexbox