html – 如何防止弹性框随内容增长

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

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

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

解决方法

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>

html – 如何防止弹性框随内容增长

解决方法

猜你在找的HTML相关文章