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

概述在下面的代码和jsfiddle中,flexbox比例随内容而变化.我觉得我不明白这里的flexbox的真正目的.如果我们按照我们想要的比例提供d性增长属性,为什么盒子会随着内容的增长而增长？ 请注意,当dataDiv中包含新的span内容时,比例会随内容而中断.删除dataDiv中的span时,可以观察到它的预期比例.为什么会这样？ https://jsfiddle.net/4shaz5oy/ . 在下面的代码和Jsfiddle中,flexBox比例随内容而变化.我觉得我不明白这里的flexBox的真正目的.如果我们按照我们想要的比例提供d性增长属性,为什么盒子会随着内容的增长而增长？

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

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 >  <div ></div>  <div >    <div >      <div ></div>      <div ></div>      <div ></div>    </div>    <div >      <div >        <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 >  <div >  </div>  <div >    <div >      <div >      </div>      <div >      </div>      <div >      </div>    </div>    <div >      <div >        <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 >  <div >    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 >    <div >      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 >      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 – 如何防止d性框随内容增长全部内容，希望文章能够帮你解决html – 如何防止d性框随内容增长所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。