如何解决如何在弹性框中垂直填充div?
flexbox出现问题。我希望白色背景填充100%高度的app-body,以便它用白色填充底部。 我仍然需要帮助。 flex:1出于某种原因不会填满剩余空间。为什么将flex-item1添加到CSS中时,不是90vh容器的高度为100%?
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#app {
display: grid;
place-items: center;
height: 100vh;
background-color: #dadbd3;
}
.app-body {
width: 90vw;
height: 90vh;
background: #ededed;
}
.flex-box {
display: flex;
}
.flex-item1 {
flex: 0.35;
height: 100%;
}
.users {
background: white;
height: 100%;
}
.inputs {
display: flex;
padding: 10px;
justify-content: center;
}
.flex-item2 {
flex: 0.65;
}
<body>
<div id="app">
<div class="app-body">
<div class="flex-box">
<div class="flex-item1">
<div class="inputs">
<input type="text">
</div>
<div class="users">
<h1>User</h1>
<p>User sent a message..</p>
</div>
</div>
<div class="flex-item2">
</div>
</div>
</div>
</div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。