3
フレックスボックスの子を持つ親コンテナがあります。フレックスアイテムはコンテナを伸ばしません
フレックスボックスには2つのキッドンがあります。フレックスボックスコンテナの幅は、2つの子ブロックで定義する必要があります。
実際、親要素は2つの子の幅にまたがって伸びません。どこにも指定されていない幅が必要です。
私は、flexboxコンテナが置かれている親ブロックのプロパティ：position:relativeに問題があると判断しました。
なぜこのプロパティはフレックスボックスコンテナの幅に影響しますか？このエラーを修正するにはどうすればよいですか？
Example on 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>
@RichardDavisがこれがあなたのために働いたかどうか教えてください、ありがとう！ – kukkuz