html - flex 元素超过

<分区>

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

布局看起来像这样:

但是如果我在 content 区域内有很长的内容， View 将如下所示:

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

示例代码如下:

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

最佳答案

你应该使用 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>

关于html - flex 元素超过，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45736353/

上一篇：html - 边缘 40/15 不透明度/可见性过渡事件传播(闪烁)错误？

下一篇：jquery - 引导 gem 不起作用

jQuery - offset().left 为 float 元素提供了错误的值

html - 如何处理滚动条换行？

javascript - 使用 flexbox 显示数据

html - 在桌面/移动设备上不显示

python - 使用参数 'results' ', '(' { )' and keyword arguments ' polls/(?P<Album_id>[0-9]+)/results/$'] 反转 }' not found. 1 pattern(s) tried: ['

html - CSS Bootstrap - 文本未正确中断

php - 属性之间没有空格错误

html - 带有中间点标记的范围输入( slider )

html - IE Flexbox - 在父元素上使用最小高度时，子元素不会拉伸(stretch)