Flex子项莫名继承表单高度问题排查求助

我使用Flexbox实现导航栏内容填充容器宽度，但导航栏内的表单元素存在未知高度，导致其兄弟Flex子项被拉伸。删除表单后兄弟元素高度恢复正常，尝试过display: inline-block但无法满足布局需求，排查所有样式未发现指定高度，寻求问题原因及解决方法。

HTML标记 #

<?php
// Define HTML structure of the Header Menu
$args = array (
  'theme_location' => 'header-menu',
  'menu_class' => 'nav-list',
  'menu_id' => null,
  'container' => 'nav',
  'link_before' => '<h2>',
  'link_after' => '</h2>'
);
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <div id="navigation" class="wrapper">
      <header>
        <h1>
          <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.11 122.11">
              <defs><style>.moon{stroke:#000;stroke-miterlimit:10;}</style></defs>
              <path class="moon" d="m96.69,15.5c-1.03-.81-2.47-.85-3.55-.1-1.08.75-1.55,2.1-1.16,3.36,2.9,9.36,3.35,19.38,1.3,28.99-6.62,31.04-37.25,50.9-68.29,44.28-1.58-.34-3.21-.76-4.97-1.3-1.25-.38-2.61.09-3.35,1.16-.74,1.08-.7,2.51.1,3.55,8.22,10.55,19.94,17.9,33.02,20.69,3.99.85,7.97,1.26,11.9,1.26,26.29,0,49.98-18.35,55.68-45.07,4.59-21.5-3.34-43.27-20.68-56.81Z"/>
              <path class="star"d="m65.33,15.55c-.2-.62-.78-1.04-1.43-1.04h-10.86l-3.36-10.33c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-3.36,10.33h-10.86c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l8.79,6.38-3.36,10.33c-.2.62.02,1.29.54,1.68.26.19.57.29.88.29s.62-.1.88-.29l8.79-6.38,8.79,6.38c.53.38,1.24.38,1.76,0,.53-.38.75-1.06.54-1.68l-3.36-10.33,8.79-6.38c.53-.38.75-1.06.54-1.68Z"/>
              <path class="star" d="m28.02,38.34h-7.94l-2.45-7.55c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-2.45,7.55h-7.94c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l6.42,4.67-2.45,7.55c-.2.62.02,1.29.54,1.68.53.38,1.24.38,1.76,0l6.42-4.67,6.42,4.67c.26.19.57.29.88.29s.62-.1.88-.29c.53-.38.75-1.06.54-1.68l-2.45-7.55,6.42-4.67c.53-.38.75-1.06.54-1.68-.2-.62-.78-1.04-1.43-1.04Z"/>
            </svg>
            <b class="invisible"><?php bloginfo('name'); ?></b>
          </a>
        </h1>
      </header>
      <form id="search" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
        <input type="search" class="input-text" name="s" placeholder="Search a neighborhood or city" autocomplete="off">
      </form>
      <?php if ( has_nav_menu( 'header-menu' ) ) : wp_nav_menu( $args ); endif; ?>
    </div>

CSS代码（使用Compass Flexbox模块） #

// Define all navigation bar related styles here

#navigation {
  padding-top: $space-horizontal;
  padding-bottom: $space-horizontal;
  @include flexbox((
    display: flex,
    flex-direction: row
  ));
  position: relative;

  > header {
    width: 24px;
    padding-right: $space-horizontal * 0.5;

    h1 > a {
      padding-bottom: 0;
      overflow: hidden;

      > #logo {
        width: 24px;
        height: 24px;

        &:hover,
        &:active {
          .moon {
            fill: #FFF;
            transition: fill 0.1s ease-in;
          }

          .star {
            fill: #FFDD5C;
            transition: fill 0.1s ease-in;
          }
        }
      }
    }
  }

  a {
    color: $color-foreground;

    &:hover,
    &:active {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  // Menu
  > .menu-header-menu-container {
    padding-left: $space-horizontal * 0.5;
    @include flex(1);

    > .nav-list {
      margin-top: $default-heading-size + 2 * $space-horizontal;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      @include respond-above(sm) {
        margin-top: 0;
        position: static;
        @include flexbox((
          display: flex,
          flex-direction: row,
        ));

        > .menu-item {
          padding-right: $space-horizontal * 0.5;
          padding-left: $space-horizontal * 0.5;
          @include flex(1);

          a {
            display: block;
          }
        }
      }
    }
  }

  // Search
  > #search {
    padding-right: $space-horizontal * 0.5;
    padding-left: $space-horizontal * 0.5;
    display: none;
    @include flex(3);

    @include respond-above(sm) {
      display: block;
    }

    > .input-text {
      width: 100%;
      font-size: $default-heading-size;
      color: $color-foreground;
      padding-top: 0;
      padding-bottom: 0;
      border: 0;
    }
  }
}

问题截图 #

问题原因 #

Flexbox容器默认的align-items属性值是stretch，这会让所有Flex子项沿着交叉轴（此处为垂直方向）拉伸至容器的高度。而表单内的input元素受浏览器默认样式（比如默认行高、内边距）或设置的字体大小影响，实际高度高于其他子项，导致整个Flex容器高度被拉高，同时兄弟子项被强制拉伸到相同高度。

解决方法 #

方案1：修改Flex容器的对齐方式

给#navigation添加align-items属性，设置为center或flex-start，阻止子项被拉伸：

#navigation {
  @include flexbox((
    display: flex,
    flex-direction: row,
    align-items: center // 添加这一行
  ));
  // 其他原有样式...
}

方案2：重置input的默认样式并统一高度

调整input的行高和高度，让表单高度和其他子项一致：

#search .input-text {
  // 原有样式...
  line-height: 1;
  height: 24px; // 和logo高度匹配
}

方案3：单独设置表单容器的对齐方式

给表单容器添加align-self属性，让它保持自身高度，不被拉伸：

#navigation > #search {
  // 原有样式...
  align-self: center; // 或flex-start
}

内容的提问来源于stack exchange，提问作者Samuel Bacay