具有空白空间的Flexbox容器不起作用

时间：2018-02-05 03:01:04

标签： html css css3 flexbox

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

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

有什么想法吗？

＆＃13;
＆＃13; 
  .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;
    }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

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

另请注意，您错过了结束<代码，并使用了一个小于号（&lt;）的折叠器。您想要使用 calculated width width代替。这些都可以通过 HTML entity 验证您的标记来发现。

我添加了.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; }计算并在以下示例中修复了此问题：

＆＃13;
＆＃13; 
<!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>
＆＃13; 
width
＆＃13;
＆＃13;
＆＃13;

请注意，由于.log-display { overflow-y: hidden; } 较短，表格现在会添加一个垂直滚动，这会使内容稍微扭曲。您可能希望用以下方式覆盖它：

{{1}}

希望这有帮助！

相关问题
最新问题