带有空白 pre 的 Flexbox 容器不起作用 [重复]答案

【问题标题】：Flexbox container with white-space pre not working [duplicate]带有空白 pre 的 Flexbox 容器不起作用 [重复]
【发布时间】：2018-02-05 12:08:35
【问题描述】：

我有一个页面，左侧有一个可折叠菜单，右侧有一个框 (.log-display)，它应该是可滚动的，但由于某种原因，内容一直在拉伸父容器 (.logviewer-container)。当我调整浏览器大小时，.logviewer-container 应该会拉伸以填满浏览器，并且永远不会超过窗口大小。

当我将.main-container { display: flex} 替换为display: block 时，问题就消失了，但我正在处理的项目要求容器应该使用flex 显示。

有什么想法吗？

  .html, .body {
    width: 100%;
    height: 100%;
    position: fixed;
  }
    .main-container {
      display: flex;
      max-width: 100%;
      flex-direction: row;
    }

    .menu {
      display: flex;
      flex: 0 0 auto;
      overflow: hidden;
      width: 0;
      -webkit-transition: width 0.5s ease-in-out;
      -moz-transition: width 0.5s ease-in-out;
      -o-transition: width 0.5s ease-in-out;
      transition: width 0.5s ease-in-out;
    }

    .menu.expanded {
      width: 110px;
    }

    .collapser { 
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      width: 10px;
      background-color: gray;
     }

     .collapser p {
      cursor: pointer;
      color: white;
      margin: 0;
     }

    .logviewer-container {
      display: flex;
      flex: 1;
      flex-direction: column;
      border: 1px solid darkgray;
    }

    .toolbar {
      display: flex;
      flex: 0 0 25px;
      background-color: lightblue;
      flex-direction: row;
    }

    .log-display {
      display: flex;
      flex: 1 1 auto;
      overflow: auto;
      flex-direction: column;
    }

    .line {
      flex: 0 0 auto;
      height: 16px;
      font-size: 11px;
      font-family: Monaco, monospace;
    }

    .row-number {
      padding-right: 6px;
      margin-right: 6px;
      width: 50px;
      color: #859900;
      border-right: 1px dotted #859900;
      text-align: end;
    }

    .row-content {
      white-space: pre;
    }

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <body>
    <div class="main-container">
      <div class="menu expanded">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
        </ul>
      </div>
      <div class="collapser">
        <p><</p>
      </div>
      <div class="logviewer-container">
        <div class="toolbar"></div>
          <div class="log-display">
            <div class="line">
              <div class="row-number">1</div>
              <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
            </div>
            <div class="line">
              <div class="row-number">2</div>
              <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
            </div>
            <div class="line">
              <div class="row-number">3</div>
              <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
            </div>
            <div class="line">
              <div class="row-number">4</div>
              <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
            </div>
            <div class="line">
              <div class="row-number">5</div>
              <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
            </div>
          </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

stackoverflow.com/q/36247140/3597276
stackoverflow.com/q/44210799/3597276
正如骗子所说，您只需将min-width: 0; 添加到.logviewer-container：jsfiddle.net/z5Lwb0ms/2
LGSon，设置 min-width: 0 有效，但我必须找到每个父 div 并将其设置为 max-width: 100%。事实证明，使用 CSS Flexbox 并没有想象中的那么简单。感谢您的提示

标签： html css flexbox

【解决方案1】：

问题是您的元素超出了容器的 width。您必须确保兄弟元素的width 不超过100%。您的三个元素中有两个具有固定的width，因此您只需将width: calc(100% - 120px) 的calculated width 应用于.logviewer-container。 110px 来自展开菜单，另一个10px 来自折叠器。

另外请注意，您缺少结束 </head> 标记，并且在折叠器中使用了小于号 (&lt;)。您需要改用 HTML entity &lt;。这些都可以通过 W3C Markup Validation Service 验证您的标记来发现。

我已添加 width 计算并在以下示例中修复了此问题：

.html,
.body {
  width: 100%;
  height: 100%;
  position: fixed;
}

.main-container {
  display: flex;
  max-width: 100%;
  flex-direction: row;
}

.menu {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  width: 0;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition: width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

.menu.expanded {
  width: 110px;
}

.collapser {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 10px;
  background-color: gray;
}

.collapser p {
  cursor: pointer;
  color: white;
  margin: 0;
}

.logviewer-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid darkgray;
  width: calc(100% - 120px);
}

.toolbar {
  display: flex;
  flex: 0 0 25px;
  background-color: lightblue;
  flex-direction: row;
}

.log-display {
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
  flex-direction: column;
}

.line {
  flex: 0 0 auto;
  height: 16px;
  font-size: 11px;
  font-family: Monaco, monospace;
}

.row-number {
  padding-right: 6px;
  margin-right: 6px;
  width: 50px;
  color: #859900;
  border-right: 1px dotted #859900;
  text-align: end;
}

.row-content {
  white-space: pre;
}

<!DOCTYPE html>
<html>

<head>
  <title>Foo</title>
</head>

<body>
  <div class="main-container">
    <div class="menu expanded">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
    <div class="collapser">
      <p>
        &lt;
      </p>
    </div>
    <div class="logviewer-container">
      <div class="toolbar"></div>
      <div class="log-display">
        <div class="line">
          <div class="row-number">1</div>
          <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
        </div>
        <div class="line">
          <div class="row-number">2</div>
          <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
        </div>
        <div class="line">
          <div class="row-number">3</div>
          <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
        </div>
        <div class="line">
          <div class="row-number">4</div>
          <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
        </div>
        <div class="line">
          <div class="row-number">5</div>
          <div class="row-content">22:21:18 | Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

请注意，由于width 更短，表格现在添加了一个垂直滚动，这会使内容稍微失真。您可能希望使用以下内容覆盖它：

.log-display {
  overflow-y: hidden;
}

希望这会有所帮助！

【讨论】：

感谢您的回答，我考虑过使用 calc(100% -120px) 的这种方法，但问题是折叠菜单是可折叠的。所以有时宽度会为 0，有时会是 110。有没有办法让logviewer-container 总是占据所有剩余的空间并防止孩子们扩大它？