Flex项目超出

Question

我尝试使用flex布局来创建一个看起来像vscode的Web IDE。

布局如下：

但如果我在content区域内有很长的东西，视图将如下所示：

我想约束content和others区域不超过浏览器的右边界。

以下是示例代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该使用white-space: pre-wrap将文本包装在pre元素中。与Nenad的回答相反，pre-wrap的好处是它保留了空格序列，这通常是使用pre元素的原因。

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

Answer 2

您有pre标记，因此文字会显示在您的代码中，因此您需要使用white-space: normal

将其分解

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

其他选项是在overflow: auto和row元素上使用col，这将在pre元素的父级上创建滚动条并保留{{1} }

＆＃13;

＆＃13;

white-space

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;