Flexbox container with white-space pre not working

Question

I have a page with a collapsible menu on the left and a box on the right (.log-display) that should be scrollable, but for some reason the content keeps stretching the parent container (.logviewer-container). When I resize the browser .logviewer-container should stretch to fill the browser and never exceed the window size.

The problem goes away when I replace the .main-container { display: flex} with display: block but the project I'm working on requires that containers should be displayed using flex.

Any ideas?

  .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>

As the dupe's explain, all you need is to add `min-width: 0;` to `.logviewer-container`: https://jsfiddle.net/z5Lwb0ms/2/ — Asons, Feb 05 '18 at 04:05
LGSon, setting `min-width: 0` worked, but I had to find each parent div and set that to max-width: 100%. Turns out, working with CSS Flexbox is not as simple as it could be. Thanks for the tip — Guilherme Lopes, Feb 05 '18 at 04:44

score 1 · Accepted Answer · answered Feb 05 '18 at 03:10

The problem is that your elements are exceeding the width of the container. You have to make sure that the width of the sibling elements don't exceed 100%. Two of your three elements have a fixed width, so all you need to do is apply a calculated width of width: calc(100% - 120px) to .logviewer-container. 110px comes from the expanded menu, and the other 10px comes from the collapser.

Also be aware that you're missing your closing </head> tag, and have used a less-than sign (<) for your collapser. You'll want to use the HTML entity < instead. These can both be spotted by validating your markup through the W3C Markup Validation Service.

I've added the width calculation and fixed this in the following example:

.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>

Note that because of the shorter width, the table now adds a vertical scroll, which distorts the content a little. You may wish to override this with:

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

Hope this helps!

Thanks for your answer, I thought about this approach using calc(100% -120px), but the problem is that the collapser menu is collapsible.. so sometimes the width will be 0, sometimes it will be 110. Is there a way to make `logviewer-container` always grab all the remaining room and prevent children from expanding it? — Guilherme Lopes, Feb 05 '18 at 03:33

Flexbox container with white-space pre not working

1 Answers1