flexbox 项目容器中的流程问题

Question

我有一个 flexbox 页面布局。它由固定宽度的左侧边栏和右侧边栏以及可拉伸以适合剩余页面的中央内容面板组成 space。

我遇到的问题是，此中央面板内的内容正在增加其容器的大小以容纳它。我真正想要的结果是该面板内的任何内容永远不会大于中央容器宽度的 100%，而不会影响其大小。我怎样才能做到这一点？

我尝试将 max-width: 100% 应用于部分元素，但这没有用。

Answer 1

您可以在 central panel 上添加 padding，在 sections 上将左右边距设置为 auto

HTML

<div class="flex-container">
  <div class="left">
     flex-left
  </div>

  <div class="center">
   <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos, ullam explicabo incidunt adipisci, quos sunt at repellendus iure, modi asperiores dicta error ut non repellat nulla. Odio, labore, minus.</section>

       <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos, ullam explicabo incidunt adipisci, quos sunt at repellendus iure, modi asperiores dicta error ut non repellat nulla. Odio, labore, minus.</section>

       <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos, ullam explicabo incidunt adipisci, quos sunt at repellendus iure, modi asperiores dicta error ut non repellat nulla. Odio, labore, minus.</section>
  </div>

  <div class="right">
    flex-right
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  padding: 5px;
  width: 100%;
  min-height: 100vh;
}

.left {
  flex: 0 1 320px;
  border: 1px solid black;
  margin: 5px;
}

.right {
  flex: 0 1 320px;
  border: 1px solid black;
  margin: 5px;
}

.center {
  flex: 1;
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
}

section {
  width: 100%;
  padding: 10px;
  border: 1px solid black;
  margin: 10px auto;
  box-sizing: border-box;
}

Answer 2

默认情况下，任何放入 flex 容器中的元素都将其 flex-basis 属性设置为 auto，这意味着如果它没有明确设置宽度，它只会增长以适应它的内容。解决方案是简单地设置其 width 属性或 flex-basis 属性.

这个 article 对于了解 flex 的工作原理非常有帮助。

这是一个快速 demo。

main {
  display: flex;
  min-height: 90vh;
}

main > div {
  padding: 15px;
}

main > .center {
  flex-basis: 60%; /*This stops it from getting wider for its content*/
  border: 1px solid black;
  justify-self: stretch;
}

main > .side {
  flex-grow: 1;
  height: 100px;
  background: cyan;
}

flexbox 项目容器中的流程问题

Flow issues in flexbox item container

css

flexbox