我们都知道,柔性属性是一个速记flex-grow,flex-shrink和flex-basis属性.它的默认值是0 1 auto.它的意思是:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
但我注意到,在很多地方flex: 1都使用过.是简写1 1 auto还是1 0 auto？我无法理解它是什么意思？我没有在谷歌上搜索任何东西.
我有一个有点像 Discord 的 Flexbox 布局。我的列表是包含我拥有的所有消息的 messageList。我想添加溢出-y：滚动到它，但它不起作用，因为我没有特定的高度。另外，我不想添加特定的高度，因为它应该是动态的。
我的解决方案是。
最大高度： calc(100vh - header.height - send.height)
但只有当您有特定的标头高度并发送时，它才有效。
还有其他办法吗？
示例： https: //jsfiddle.net/AvaPLaIN/b7umpgzn/44/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
border: 2px solid black;
}
.header {
width: 100%;
border: 2px solid red;
min-height: 3rem;
}
.content {
flex: 1;
display: flex;
border: 2px solid green;
}
.chatbox {
flex: 1;
border: 2px solid yellow;
display: flex;
flex-direction: column;
}
.members {
width: …