Flexbox项容器中的流问题

Question

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

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

我尝试将最大宽度：100％应用于剖面元素但不起作用。

Answer 1

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

<强> DEMO

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