无法将 CSS 弹性框设置为 "row"

Question

我有一个实时搜索覆盖，它有一个带有三个"结果"的伸缩容器。容器，这三个都是柔性容器。他们的孩子的灵活方向工作得很好，但结果本身不接受"灵活方向"。然后在搜索伸缩容器

中依次对齐

.search-container {
position: absolute;
display: flex;
flex-direction: row;
padding-top: 60px;
padding-bottom: 30px;
right: 105px;
top: 43px;
width: 70%;
height: 500px;
background-color: rgba(214, 224, 214, 0.94);
z-index: 2;
}
.search-results-1 {
width: 30%;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
overflow: auto;
margin-left: 20px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.search-post-item {
position: relative;
}
.search-results-1 p {
position: absolute;
top: 10px;
left: 150px;
}
.search-post-excerpt {
position: absolute;
top: 30px !important;
width: 47%;
overflow-wrap: break-word;
}
.search-post-img {
display: inline-block;
margin-top: 20px !important;
margin-left: -2px !important;
}

<div class="search-container search-overlay-close">
<form action="" method="POST">
<input type="text" name="searchcontent" placeholder="Watcha Lookin For?" id="search">
<button type="submit" name="search">
<i class="fas fa-search search-glass"></i>
</button>
<i class="fa fa-times search-close" aria-hidden="true"></i>
</form>
<div class="search-results-1"></div>
<div class="search-results-2"></div>
<div class="search-results-3"></div>
</div>

，这是css(有三个"。search-results"但它们很相似，所以我只包括了第一个):

我没有包含表单的CSS，因为它是"绝对的"。最后这是被注入到每个搜索结果中的HTML

<div class="search-post-item">
<a href="pages/post.php?id=<?php echo $post['id']; ?>" class="search-post-img"><img src="files/thumbnails/<?= $post['thumb'] ?>" alt=""></a>
<p><a href="pages/post.php?id=<?php echo $post['id']; ?>"><?php echo $post['title']; ?></a></p>
<p class="search-post-excerpt"><?php echo strip_tags(substr($post['content'], 0, 100)); ?></p>
</div>

顺便说一下，使用"float"就可以了。但我只是想让它更有响应性。

Answer 1

有几件事你可以改进。就像使用flex时，你可以使用gap而不是在子元素上使用margin(这通常会导致像你这样的问题)。同样在你的情况下，你可以为search-container使用网格。如果你的search-results是相同的您可以使用具有相同属性的类，并添加"修饰符"对于不同的属性。

我删除了box-sizing: border-box;，应该在你的基础css和应用程序中的所有元素。

Box-sizing

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
box-sizing: border-box;
}

.search-container {
position: absolute;
padding-top: 60px;
padding-bottom: 30px;
right: 105px;
top: 43px;
width: 70%;
height: 500px;
background-color: rgba(214, 224, 214, 0.94);
z-index: 2;
}
.search-result-list {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.search-results {
display: flex;
flex-direction: column;
overflow-wrap: break-word;
overflow: auto;
height: 100%;
}
.search-results-1 {
background-color: aqua;
}
.search-results-2 {
background-color: aquagreen;
}
.search-results-3 {
background-color: red;
}
.search-post-item {
position: relative;
}
.search-results-1 p {
position: absolute;
top: 10px;
left: 150px;
}
.search-post-excerpt {
position: absolute;
top: 30px !important;
width: 47%;
overflow-wrap: break-word;
}
.search-post-img {
display: inline-block;
margin-top: 20px !important;
margin-left: -2px !important;
}

<div class="search-container search-overlay-close">
<form action="" method="POST">
<input type="text" name="searchcontent" placeholder="Watcha Lookin For?" id="search">
<button type="submit" name="search">
<i class="fas fa-search search-glass"></i>
</button>
<i class="fa fa-times search-close" aria-hidden="true"></i>
</form>
<ul class="search-result-list">
<li class="search-results search-results-1"></li>
<li class="search-results search-results-2"></li>
<li class="search-results search-results-3"></li>
</ul>
</div>