Question

在下面的代码和jsfiddle中，flexbox比例随内容而变化。我觉得我不明白这里的flexbox的真正目的。如果我们按照我们想要的比例提供flex-grow属性，为什么这些方框会随着内容的增长而增长？

请注意，当dataDiv中包含新的跨区内容时，内容会打破比例。删除span内的dataDiv时，您可以观察到预期的比例。为什么会这样？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

flex-grow定义了如何在flex项目之间分配剩余空间，而不是项目本身。

对于他们的尺寸，您使用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>

Answer 2

看起来一切都按预期工作，问题是yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada之间没有空间来关注框的增长。

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

如何防止弹性框与内容

2 个答案: