如何防止弹性盒随内容增长

Question

在下面的代码和jsfiddle中,flexbox比例随内容而变化.我觉得我不明白这里的flexbox的真正目的.如果我们flex-grow按照我们想要的比例提供物业,为什么箱子会随着内容的增长而增长？

请注意,当其中dataDiv包含新的跨度内容时,比例会随内容而中断.删除span内部时,您可以观察它的预期比例dataDiv.为什么会这样？

https://jsfiddle.net/4shaz5oy/

.container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
.mapBox {
  flex: 2;
  background-color: red;
}
.controlBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.controlPanel {
  flex: 1;
  max-height: 33%;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
.dataPanel {
  flex: 2;
  max-height: 66%;
  background-color: blue;
  padding: 5px;
}

<div class="container">
  <div class="mapBox"></div>
  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
    </div>
    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada</span>
      </div>
    </div>
  </div>
</div>

Answer 1

看起来一切都按预期进行，问题是yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada焦点框之间没有空间可以生长。

如果你设置了，.dataPanel {word-break: break-all;}你会看到差异。

Answer 2

在flex-grow定义了剩余的空间应该跻身柔性项目，而不是项目本身进行分配。

对于它们的大小，您使用 flex-basis

html, body {
  margin: 0;
}
.container {
    display: flex;
    flex-flow: row wrap;
    height: 100vh;
}

.mapBox {
    flex: 2;
    flex-basis: 66%;
    background-color: red;
}

.controlBox {
    flex: 1;
    flex-basis: 33%;
    display: flex;
    flex-direction:column;
    background-color:green;
}

.controlPanel {
    flex: 1;
    max-height: 33%;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

.dataPanel {
    flex: 2;
    max-height: 66%;
    background-color: blue;
    padding: 5px;
}

<div class="container">
  <div class="mapBox">

  </div>

  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
    </div>

    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoy as da sd ad sa da sd as da sd as da sd as da sd ad ada</span>
      </div>
    </div>
  </div>
</div>

根据评论，这是如何保持尺寸的简化示例

html, body{
  margin: 0;
}
.flex, .left, .right {
  display: flex;
}
.left, .right {
  flex: 1;
  flex-direction: column;
}
.left {
  background: red;
  flex-basis: 66.66%;
}
.right {
  flex-basis: 33.33%;
}
.item1 {
  background: yellow;
  overflow: auto;
  height: 33.33vh;
}
.item2 {
  background: lightblue;
}

<div class="flex">
  <div class="left">
    Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 <br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>

  </div>
  <div class="right">
    <div class="item1">
      Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 <br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

    </div>
    <div class="item2">
      Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 <br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

    </div>
  </div>  
</div>