内容长时如何防止div推送其他div答案

【问题标题】：How to prevent div from pushing others div when there is long content内容长时如何防止div推送其他div
【发布时间】：2020-09-13 03:27:37
【问题描述】：

大家好，需要您对 CSS 布局的指导，

我对 CSS 和 Flexbox 很陌生，并尝试构建一个简单的布局。

我面临的问题是，如何防止pre标签里面的长内容推到别人div

长代码内容前：

经过长代码内容：

从截图来看，有2个问题：

左侧边栏和右侧边栏被主内容推送
前置内容应该像 StackOverflow 一样包裹成可滚动的

我正在考虑在 pre 标签上设置最大宽度并使用溢出：滚动，但是如何根据父容器设置最大宽度？（父容器是流体）

这是代码笔：

https://codepen.io/cyberflyx/pen/VwaxNWp

<html>

<head>
  <title>Learn Max Width</title>
</head>

<body>
  <div class="flex justify-between">
    <div class="left-sidebar bg-blue p-4">
      <h3>This is Left Sidebar</h3>
    </div>
    <div class="main-content flex-1 bg-yellow p-4">
      <div class="content-body">
        <h3>Main Content</h3>
        <p>This is long content between all of use</p>
        <pre>
        Sep 10 17:10:30 api-testapp-03 testapp.commands.generate_logs.run_test(): NOTICE: Got events:/home/m/app/testapp/queues/test.queue 


      </pre>

      </div>

    </div>
    <div class="right-sidebar bg-red p-4">
      <h3>This is Right Sidebar</h3>
    </div>
  </div>
</body>

</html>

CSS

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.left-sidebar {
}

.content-body {

}

.right-sidebar {
}

pre {
  background-color: pink;
  padding: 4px;
  border-radius: 10px;
/*     overflow: scroll; */
/*   max-width: 500px; */
}

.flex-1 {
  flex: 1 1 0%;
}

.p-4 {
  padding: 4px;
}

.bg-blue {
  background-color: blue;
}

.bg-yellow {
  background-color: yellow;
}

.bg-red {
  background-color: red;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

问题不在于中间的<div> 容器，而是跨越其内容长度的<pre> 元素。要包装文本，请使用 white-space CSS 属性：

.flex {
  display: flex;
}

pre {
  background-color: pink;
  border-radius: 10px;
  padding: 4px;
  white-space: pre-wrap;
}

.p-4 {
  padding: 4px;
}

.bg-blue {
  background-color: blue;
}

.bg-yellow {
  background-color: yellow;
}

.bg-red {
  background-color: red;
}

<div class="flex justify-between">
  <div class="left-sidebar bg-blue p-4">
    <h3>This is Left Sidebar</h3>
  </div>
  <div class="main-content flex-1 bg-yellow p-4">
    <div class="content-body">
      <h3>Main Content</h3>
      <p>This is long content between all of use</p>
      <pre>
        Sep 10 17:10:30 api-testapp-03 testapp.commands.generate_logs.run_test(): NOTICE: Got events:/home/m/app/testapp/queues/test.queue 
      </pre>

    </div>

  </div>
  <div class="right-sidebar bg-red p-4">
    <h3>This is Right Sidebar</h3>
  </div>
</div>

【讨论】：

【解决方案2】：

我可以通过将overflow: auto; 添加到<pre> 标记来添加可滚动的<pre>。然后由于flex下有3个子元素，我在flex类的所有子元素中添加了33%的max-width。这是最终的css

.left-sidebar, .main-content, .right-sidebar {
    max-width: 33%;
}

pre {
    overflow: auto;
}

关键是将所有子元素的最大宽度设置为 33%。这会将父元素分成 3 个相等（几乎）固定的部分。

另请注意，justify-content: space-between; 可能会在 3 个 div 之间添加一些空格。如果您不想在它们之间留有空间，只需将您的 flex-1 类添加到 left-sidebar 和 right-sidebar div 元素

【讨论】：

谢谢。始终设置侧边栏的宽度/最大宽度并让内容容器采用可用宽度是一种标准做法吗？
flexbox 将自动在子元素之间平均分配父容器宽度。这是flexbox 的默认行为。但是，在您的情况下，我认为 pre 元素导致 flexbox 不均匀地分布宽度。我在这里设置max-width 属性只是为了“覆盖”这种行为。
我不明白为什么 main-content 的最大宽度应该是 33%？