Can not set CSS FlexBox to "row"

Question

I have a live search overlay that has a flex container with three "results" containers which all three are also flex containers. Their children's flex direction works fine, but the results themselves don't accept "flex-direction: row" and just line up on top of each other in the search flex container:

.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>

and this is the css(there are three ".search-results" but they're similar so I only included the first):

I did not include the CSS for the FORM because it's "absolute". And finally this is the HTML that gets injected into every "search-results" container via AJAX.

<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>

By the way the whole thing works just fine with "float". But I just want to make it more responsive.

Answer 1

There are a few things you can improve. Like when using flex you can use gap instead of using margins on the children (that often causes issues like yours). Also in your case you can use grid for the search-container. Also if your search-results is "the same" you can use a class with the same properties and add a "modifier class" for the properties that differs.

I removed the box-sizing: border-box; that should be in your base css and apply to all off your elements in the application.

Box-sizing

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

body {
  box-sizing: border-box;
}

Search

.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>