html – 如何使Flexbox(flex-grow)考虑内容以确定大小？

概述当两个元素都使用flex-grow时,我们怎样才能让Flexbox停止在兄弟元素中均衡空间：1.这很难在前面解释,所以这里的代码很快会跟着问题的截图和期望的行为. .Parent { display: flex; flex-direction: column; background-color: lightcoral; width: 400px; min-height: 200 当两个元素都使用flex-grow时,我们怎样才能让FlexBox停止在兄弟元素中均衡空间：1.这很难在前面解释,所以这里的代码很快会跟着问题的截图和期望的行为.

.Parent {  display: flex;  flex-direction: column;  background-color: lightcoral;  wIDth: 400px;  min-height: 200px;}.Parent>div {  flex: 1;}.child1 {  background-color: lightblue;}.child2 {  background-color: lightgreen;}

<div >  <div >Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincIDunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>  <div >Lorem ipsum</div></div>

问题：

注意每个div内容下的空格相等.

期望：

当子div中的内容很少时,div应该具有相同的高度：

当其中一个div有很多内容时,我希望内容更多的div只能与内容一样高(如果它通过了原始的flex增长分配).

我怎么能得到这种行为？似乎使用FlexBox应该很容易.

解决方法 flex-basis是您正在寻找的属性. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

The flex-basis CSS property specifIEs the flex basis which is the initial main size of a flex item. This property determines the size of the content-Box unless specifIEd otherwise using Box-sizing.

默认情况下,flex会在计算flex-grow时考虑元素中的内容 – 要禁用它,只需指定flex-basis：0

.Parent {  display: flex;  flex-direction: column;  background-color: lightcoral;  wIDth: 400px;  min-height: 200px;}.Parent>div {  flex-grow: 1;  flex-basis: 0;}.child1 {  background-color: lightblue;}.child2 {  background-color: lightgreen;}

<div >  <div >Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincIDunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus </div>  <div >Lorem ipsum</div></div>

总结

以上是内存溢出为你收集整理的html – 如何使Flexbox(flex-grow)考虑内容以确定大小？全部内容，希望文章能够帮你解决html – 如何使Flexbox(flex-grow)考虑内容以确定大小？所遇到的程序开发问题。

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