Flex item exceeds

Question

I'm trying to use flex layout to create a web IDE that looks like vscode.

The layout looks like this:

But if I have something very long inside of content area, the view will look like this:

I want to constraint the content and others area not exceed browser's right boundary.

Here is the sample code:

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

#row1 {
  background-color: red;
  flex: 0 0 50px;
}

#row2 {
  flex: 0 0 200px;
  background-color: blue;
}

#row3 {
  background-color: green;
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  display: flex;
}

#col1 {
  background-color: grey;
  flex: 1;
}

#col2 {
  background-color: rgb(40, 40, 40);
  flex: 0.5;
}

<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
      <pre>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      </pre>
    </div>
    <div id="col2">others</div>
  </div>
</div>

<br>

<!-- I want view like this -->
<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
    </div>
    <div id="col2">others</div>
  </div>

This is because you are using `pre` which will preserve whitespace. Is there any reason for this? The easiest way would be to allow the text to wrap by not using `pre`, perhaps a `div` instead. — Hidden Hobbes, Aug 17 '17 at 13:29
@HiddenHobbes, I don't want to do word wrap, because this content will show some logs. I think is more readable not to wrap word. Can I make
`overflow-x: auto` based on the content area's width? I tried many times, but all test failed. — Charles Wei, Aug 17 '17 at 14:03
The problem has nothing to do with the `pre` tag *per se*. It has to do with the *minimum sizing algorithm* of flex items, which sets a default minimum width relative to the content width (i.e., `min-width: auto`). — Michael Benjamin, Aug 17 '17 at 16:35

score 1 · Answer 1 · answered Aug 17 '17 at 13:34

You should use white-space: pre-wrap to wrap the text inside a pre element. In contrast to Nenad's answer, the benefit of pre-wrap is that it preserves the sequences of white-spaces, which is often the reason for using a pre element.

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

#row1 {
  background-color: red;
  flex: 0 0 50px;
}

#row2 {
  flex: 0 0 200px;
  background-color: blue;
}

#row3 {
  background-color: green;
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  display: flex;
}

#col1 {
  background-color: grey;
  flex: 1;
}

#col1 > pre {
  white-space: pre-wrap;
}

#col2 {
  background-color: rgb(40, 40, 40);
  flex: 0.5;
}

<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
      
      <pre>
TEST TEST TEST      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      </pre>
    </div>
    <div id="col2">others</div>
  </div>
</div>

<br>

<!-- I want view like this -->
<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
    </div>
    <div id="col2">others</div>
  </div>

I don't want to do word wrap, because this content will show some logs. I think is more readable not to wrap word. Can I make
overflow-x: auto based on the content area's width? I tried many times, but all test failed. — Charles Wei, Aug 17 '17 at 14:32

Nenad Vracar · Accepted Answer · 2017-08-17T14:56:15.867

You have pre tag so text is displayed as it is in your code, so you need to break it using white-space: normal

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

#row1 {
  background-color: red;
  flex: 0 0 50px;
}

#row2 {
  flex: 0 0 200px;
  background-color: blue;
}

#row3 {
  background-color: green;
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  display: flex;
}

#col1 {
  background-color: grey;
  flex: 1;
}

#col2 {
  background-color: rgb(40, 40, 40);
  flex: 0.5;
}

pre {
  white-space: normal;
}

<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
      <pre>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      </pre>
    </div>
    <div id="col2">others</div>
  </div>
</div>

Other option is to use overflow: auto on both row and col elements and this will create scroll-bar on parent of the pre element and keep white-space

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

#row1 {
  background-color: red;
  flex: 0 0 50px;
}

#row2 {
  flex: 0 0 200px;
  background-color: blue;
}

#row3 {
  background-color: green;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#col1 {
  background-color: grey;
  flex: 1;
  overflow: auto;
}

#col2 {
  background-color: rgb(40, 40, 40);
  flex: 0.5;
}

<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
      <pre>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      </pre>
    </div>
    <div id="col2">others</div>
  </div>
</div>

I don't want to do word wrap, because this content will show some logs. I think is more readable not to wrap word. Can I make
overflow-x: auto based on the content area's width? I tried many times, but all test failed. — Charles Wei, Aug 17 '17 at 14:32
It's really close to what I want. I more thing. Can I only overflow-x on
tag? Not the whole content area. Because I want to put something above the
tag to add some description. Thanks a lot. — Charles Wei, Aug 17 '17 at 15:07
You can wrap it another div https://jsfiddle.net/Lg0wyt9u/2179/ — Nenad Vracar, Aug 17 '17 at 15:10

Flex item exceeds

2 Answers2