文章/答案/技术大牛

发布

社区首页 >问答首页 >带空白的Flexbox容器不工作

问带空白的Flexbox容器不工作
EN

Stack Overflow用户

提问于 2018-02-05 03:01:04

回答 1查看 96关注 0票数 0

我有一个页面，左边有一个可折叠菜单，右边有一个框(.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>

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-05 03:10:40

问题是您的元素超过了容器的宽度。您必须确保同级元素的width不超过100%。您的三个元素中有两个具有固定的width，所以只需将计算宽度 of width: calc(100% - 120px)应用于.logviewer-container。110px来自扩展菜单，另一个10px来自折叠程序。

还要注意，您丢失了关闭的</head>标记，并且在折叠器中使用了一个小于符号(<)。您将需要使用HTML实体 <代替。这两者都可以通过W3C标记验证服务验证您的标记来发现。

我添加了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;
}

希望这能有所帮助！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48615304

复制

相似问题

问带空白的Flexbox容器不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带空白的Flexbox容器不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带空白的Flexbox容器不工作
EN