Flex 项目不会拉伸容器

Question

有父容器和子 flexbox 容器。

Flexbox 容器有两个孩子。 flexbox 容器的宽度应该由两个子块定义。

事实上，父元素并没有跨越两个子元素的宽度。它需要一个未在任何地方指定的宽度。

我确定问题出在 flexbox 容器所在的父块的属性：position:relative。

为什么这个属性会影响 flexbox 容器的宽度？我该如何解决这个错误？

Example 在 Codepen 上。

.openned-0-40 .box-0-33 {
  top: calc(100% + 5px);
  height: 405pxpx;
  padding: 12px 18px;
  z-index: 2;
  position: absolute;
}

.box-0-33 {
  width: auto;
  height: 405px;
  display: block;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
  border-radius: 0px 0px 2px 2px;
  padding-right: 0;
  background-color: white;
}

* {
  box-sizing: border-box;
}

.content-0-45 {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
}

.popularCountries-0-42 {
  flex-basis: 185px;
  flex-shrink: 0;
  margin-right: 55px;
}

.popularCountries-0-42 .header-0-36 {
  border: none;
  margin-bottom: 16px;
}

.header-0-36 {
  font-size: 14px;
  text-align: left;
  font-family: Proxima Nova Semibold, Tahoma, sans-serif;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.popularCountries-0-42 .item-0-49 {
  font-family: Proxima Nova Light, Tahoma, sans-serif;
  margin-bottom: 9px;
}

.item-0-49 {
  cursor: pointer;
  padding: 0 6px;
  text-align: left;
  transition: all .1s ease;
  font-family: Proxima Nova Light, Tahoma, sans-serif;
  margin-left: -6px;
  user-select: none;
  margin-bottom: 4.9px;
}

.popularCountries-0-42 .item-0-49 span {
  width: 20px;
  height: 14px;
  margin-right: 16px;
}

.flag-icon-cn {
  background-image: url(/static/media/cn.5d831425.svg);
}

.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}

.allCountriesWrapper-0-44 {
  text-align: center;
}

.header-0-36 {
  font-size: 14px;
  text-align: left;
  font-family: Proxima Nova Semibold, Tahoma, sans-serif;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.allCountries-0-46 {
  display: flex;
  flex-grow: 1;
  text-align: center;
  padding-top: 13px;
}

.column-0-47 {
  margin-right: 25px;
}

.itemWrapper-0-48 {
  text-align: left;
  margin-bottom: 9px;
}

.inputBox-0-31 {
  width: 200px;
  height: 40px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

<div class="inputBox-0-31 openned-0-40">
  <div class="box-0-33">
    <div class="content-0-45">
      <div class="popularCountries-0-42">
        <div class="header-0-36">Популярные направления:</div>
        <div class="popularCountriesList-0-43">
          <div class="item-0-49">
            <span class="flag-icon flag-icon-cn"></span>
            <!-- react-text: 286 -->Китай
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-at"></span>
            <!-- react-text: 289 -->Австрия
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-aw"></span>
            <!-- react-text: 292 -->Аруба
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-bh"></span>
            <!-- react-text: 295 -->Бахрейн
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-be"></span>
            <!-- react-text: 298 -->Бельгия
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-bg"></span>
            <!-- react-text: 301 -->Болгария
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-hu"></span>
            <!-- react-text: 304 -->Венгрия
            <!-- /react-text -->
          </div>
          <div class="item-0-49">
            <span class="flag-icon flag-icon-hk"></span>
            <!-- react-text: 307 -->Гонконг
            <!-- /react-text -->
          </div>
        </div>
      </div>
      <div class="allCountriesWrapper-0-44">
        <div class="header-0-36">Все страны:</div>
        <div class="allCountries-0-46">
          <div class="column-0-47">
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Австрия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Албания</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Аруба</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Бахрейн</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Бельгия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Болгария</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Венгрия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Гонконг</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Греция</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Дания</span>
            </div>
          </div>
          <div class="column-0-47">
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Доминиканская Республика</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Египет</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Индонезия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Иордания</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Ирландия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Испания</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Италия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Камбоджа</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Канада</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Кения</span>
            </div>
          </div>
          <div class="column-0-47">
            <div class="itemWrapper-0-48">
              <span class="item-0-49 activeItem-0-50 item-0-49">Китай</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Куба</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Латвия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Литва</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Маврикий</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Малайзия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Мальдивы</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Норвегия</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Перу</span>
            </div>
            <div class="itemWrapper-0-48">
              <span class="item-0-49 ">Сейшельские острова</span>
            </div>
          </div>
        </div>
        <button class="button-0-51" title="Показать все">Показать все</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您在此处使用绝对定位，这就是不考虑自动宽度的原因。

从box-0-33 中删除position: absolute（改用relative）和从.inputBox-0-31 中删除width: 200px - 请参见下面的演示：

.openned-0-40 .box-0-33 {
  top: calc(100% + 5px);
  height: 405pxpx;
  padding: 12px 18px;
  /*position: absolute;*/
  position: relative;
  z-index: 2;
}

.box-0-33 {
  width: auto;
  height: 405px;
  display: block;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
  border-radius: 0px 0px 2px 2px;
  padding-right: 0;
  background-color: white;
}

* {
  box-sizing: border-box;
}

.content-0-45 {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
}

.popularCountries-0-42 {
  flex-basis: 185px;
  flex-shrink: 0;
  margin-right: 55px;
}

.popularCountries-0-42 .header-0-36 {
  border: none;
  margin-bottom: 16px;
}

.header-0-36 {
  font-size: 14px;
  text-align: left;
  font-family: Proxima Nova Semibold, Tahoma, sans-serif;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.popularCountries-0-42 .item-0-49 {
  font-family: Proxima Nova Light, Tahoma, sans-serif;
  margin-bottom: 9px;
}

.item-0-49 {
  cursor: pointer;
  padding: 0 6px;
  text-align: left;
  transition: all .1s ease;
  font-family: Proxima Nova Light, Tahoma, sans-serif;
  margin-left: -6px;
  user-select: none;
  margin-bottom: 4.9px;
}

.popularCountries-0-42 .item-0-49 span {
  width: 20px;
  height: 14px;
  margin-right: 16px;
}

.flag-icon-cn {
  background-image: url(/static/media/cn.5d831425.svg);
}

.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}

.allCountriesWrapper-0-44 {
  text-align: center;
}

.header-0-36 {
  font-size: 14px;
  text-align: left;
  font-family: Proxima Nova Semibold, Tahoma, sans-serif;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.allCountries-0-46 {
  display: flex;
  flex-grow: 1;
  text-align: center;
  padding-top: 13px;
}

.column-0-47 {
  margin-right: 25px;
}

.itemWrapper-0-48 {
  text-align: left;
  margin-bottom: 9px;
}

.inputBox-0-31 {
  /*width: 200px;*/
  height: 40px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

<div class="inputBox-0-31 openned-0-40">
  <div class="box-0-33">
    <div class="content-0-45">
      <div class="popularCountries-0-42">
        <div class="header-0-36">Популярные направления:</div>
        <div class="popularCountriesList-0-43">
          <div class="item-0-49"><span class="flag-icon flag-icon-cn"></span>
            <!-- react-text: 286 -->Китай
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-at"></span>
            <!-- react-text: 289 -->Австрия
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-aw"></span>
            <!-- react-text: 292 -->Аруба
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-bh"></span>
            <!-- react-text: 295 -->Бахрейн
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-be"></span>
            <!-- react-text: 298 -->Бельгия
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-bg"></span>
            <!-- react-text: 301 -->Болгария
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-hu"></span>
            <!-- react-text: 304 -->Венгрия
            <!-- /react-text -->
          </div>
          <div class="item-0-49"><span class="flag-icon flag-icon-hk"></span>
            <!-- react-text: 307 -->Гонконг
            <!-- /react-text -->
          </div>
        </div>
      </div>
      <div class="allCountriesWrapper-0-44">
        <div class="header-0-36">Все страны:</div>
        <div class="allCountries-0-46">
          <div class="column-0-47">
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Австрия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Албания</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Аруба</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Бахрейн</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Бельгия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Болгария</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Венгрия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Гонконг</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Греция</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Дания</span></div>
          </div>
          <div class="column-0-47">
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Доминиканская Республика</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Египет</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Индонезия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Иордания</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Ирландия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Испания</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Италия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Камбоджа</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Канада</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Кения</span></div>
          </div>
          <div class="column-0-47">
            <div class="itemWrapper-0-48"><span class="item-0-49 activeItem-0-50 item-0-49">Китай</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Куба</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Латвия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Литва</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Маврикий</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Малайзия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Мальдивы</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Норвегия</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Перу</span></div>
            <div class="itemWrapper-0-48"><span class="item-0-49 ">Сейшельские острова</span></div>
          </div>
        </div><button class="button-0-51" title="Показать все">Показать все</button></div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/static/js/bundle.js"></script>

Answer 2

您正在使用具有固定宽度的 .inputBox-0-31 在包含您的 flex 子项的主父项上。删除那个 css 类。