html - 如何使我的 flexbox 容器与内容垂直自动扩展?
问题描述
正如您在随附的屏幕截图中看到的那样,内容已经溢出。我不想使用溢出,因为我不想在 div .results 容器“内部”滚动,我希望它根据需要扩展内容。我一直在谷歌搜索,但我尝试过的解决方案(例如 min-height)破坏了布局,例如向上推上部直到它不再可见或无法访问。
* {
font-size: 28px;
font-family: "Assistant";
box-sizing: border-box;
font-weight: 400;
color: #333333;
}
.main-main {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
background-color: #fff;
}
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 90%;
height: 90%;
box-shadow: 0 5px 10px rgba(154,160,185,.5), 0 15px 40px rgba(166,173,201,.2);
align-content: flex-start;
}
.top-section {
padding: 20px;
width: 100%;
min-height: 20%;
display: flex;
background-color: #caf0f8;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.instructions {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 10px;
height: 100%;
}
.my-button {
height: 20%;
padding: 20px;
display: flex;
background-color: #ade8f4;
}
.results {
width: 100%;
min-height: 80%;
padding: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: #90e0ef;
align-items: flex-start;
align-content: flex-start;
}
button {
padding: 15px;
font-size: 16px;
height: 60px;
border: 0px;
color: #fff;
background-color: #03045e;
}
#my-input {
height: 60px;
width: 500px;
padding-left: 20px;
border: 0px;
}
::placeholder {
color: lightblue;
}
.my-box {
background-color: #ffff3f;
font-size: 40px;
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
*:focus {
outline: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="main-main">
<div class="main-container">
<div class="top-section">
<div class="instructions"><input type="text" id="my-input" placeholder="Enter string..."></div>
<div class="instructions"><button type="button" id="my-button">Arrayify!</button></div>
</div>
<div class="results" id="my-results"></div>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
解决方案
从所有周围的容器中取出height
,让它们垂直伸展以适应其内容。
推荐阅读
- html - CSS 网格和响应式视图
- javascript - ScrollTop setInterval 不适用于 Angular 6
- eloquent - 如何为我的所有模型添加相同的事件侦听器?
- ios - 如何使用 Swift 4.2 创建应用商店应用更新通知机制?
- python-3.x - UnicodeDecodeError:“charmap”编解码器无法解码位置 40 中的字节 0x81:字符映射到
- javascript - Jquery .val() 中的多个变量 - 多选更新
- c++ - 当调用 openssl 加密数据时,CryptDecrypt 失败并显示 ERROR_INVALID_PARAMETER
- android - Android上的ImageBackground重复没有填满屏幕
- laravel - 列出表中的所有值并查询整数列的实际值并显示在视图中
- python - sklearn 管道:在 GridSearchCV 中应用 TimeSeriesSplit 之前,在完整的训练集上运行 TfidfVectorizer?