wordpress サイト内検索で何もヒットしなかった場合、表示される投稿が無いため要素の幅が狭くなってしまう

Question

検索がヒットした場合は下記画像の様にきれいに表示できるのですがヒットしなかった場合に要素の幅が狭くなってしまいレイアウトが崩れてしまいます。
幅の数値指定をせずに可変を維持したまま記事分の幅を確保する方法はないでしょうか？

検索ヒット時

検索非ヒット時

//search.php

<?php get_header(); ?>


<!--ページ上部にスクロールするボタン
 <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
-->


<div class="sp-newarticle">
  <p>記事一覧</p>
</div>


<div class="main">



  <div class="articles">

    <?php if (have_posts()): ?>
      <div class="search-results">
        <?php
    if (isset($_GET['s']) && empty($_GET['s'])) {
      echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
    } else {
      echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
    }
  ?></div>
  <ul>
  <?php while(have_posts()): the_post(); ?>

  <?php endwhile; ?>
  </ul>
  <?php else: ?>
  <div class="search-results">
  <p>検索されたキーワードにマッチする記事はありませんでした</p>
  </div>
  <?php endif; ?>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article class="article">
            <img class="article-img" src="<?php echo catch_that_image(); ?>">
            <div class="article-right">
          <header>
            <h2 class="article-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <section>
            <div class="section-header">


            <ul class="article-genre">
              <li><time><i class="far fa-clock"></i><?php the_time('Y/m/d'); ?></time></li>
              &ensp;
              <li><a href="#"><i class="fas fa-tag"></i><?php the_category(' '); ?></a></li>
              <li class="article-tag"><a href="#"><?php the_tags( '', ' , ' ); ?></a></li>
            </ul>
        </div>
      </section>

          </header>

<section class="article-text">
    <p> <?php the_excerpt(); ?>
</p>
</section>
<footer>  <a class="read-more" href="<?php the_permalink(); ?>">続きを読む</a> </footer>
        </div>

    </article>
    <?php
  endwhile;
      endif;
      ?>
  </div>

<?php get_sidebar(); ?>
</div>



  <?php
  //Pagenation
  if (function_exists("pagination")) {
  	pagination($additional_loop->max_num_pages);
  }
  ?>

<div class="mobile-search">
  <p class="mobile-search-title">サイト内検索</p>
    <?php  get_search_form(); ?>
</div>

<aside id="mobile-rank"><?php dynamic_sidebar( 'side-widget2' ); ?></aside>
  </div>

<?php get_footer(); ?>

.main {display:flex;}

.article {
  max-width:850px;
  height:190px;
  padding:15px;
  display:flex;
  background-color: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  margin-bottom:20px;
  position: relative;}

.container {
  width: 100%;
  padding-top:10px;
  max-width:1170px;
  background-color: #ECF0F3;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;}

.search-results {color:#ffffff;
  background-color: #566170;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5) ;
  text-align: center;}
  //スマホ用CSS

Comments

[KazuhiroHatano]

.mainとそれに関連するcssの方が問題じゃないかと思います

float:left;やdisplay:inline-blockでやってるんでしょうか？

[kawakamikami1]

.mainと関連するCSSを追記致しました。
横並びは.mainにフレックスをかけています。

Answer 1

.articles {
  max-width:850px;
  flex:1 1 auto;
}

を追加

Comments

[kawakamikami1]

完璧に動作しました。
ありがとうございます！

Answer 2

min-width もNGでしょうか。

Comments

[kawakamikami1]

ご回答ありがとうございます。
今の仕様と自分のやり方だとどうしてもブレークポイントが多くなってしまうので最終手段として考えておりました。