选项卡导航在新行上进行，而不是在移动设备上包装选项卡文本

Question

我有两个选项卡的选项卡导航。当屏幕宽度减少到一个小的移动(低于415px(时，选项卡会放在两个不同的行上，而不是将选项卡文本换行，使两个选项卡都保持在一行上。请帮我包装一下标签文本。我尝试过设置max-width，更改一些显示选项，并添加flex-wrap: wrap;，但都无济于事。

JSFiddle：https://jsfiddle.net/Clubba/hqud9L46/2/

HTML

<div class="tab-wrap">
<input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
<label for="tab1"><span style="font-family:Montserrat,sans serif;">Tab 1 title</span></label>
<input type="radio" id="tab2" name="tabGroup1" class="tab">
<label for="tab2"><span style="font-family:Montserrat,sans serif;">Tab 2 title</span></label>

<div class="tab__content"><br />
Tab 1 content
</div>

<div class="tab__content"><br />
Tab 2 content
</div>
</div>

CSS

.tab-wrap {
-webkit-transition: 0.3s box-shadow ease;
transition: 0.3s box-shadow ease;
border-radius: 15px 15px 0 0;
max-width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
list-style: none;
background-color: #fff;
margin: 40px 0;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.02), 0 1px 10px rgba(0, 0, 0, 0.1);
}
.tab {
display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
opacity: 1;
-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tab:checked + label {
background-color: #fff;
box-shadow: 0 -1px 0 #fff inset;
cursor: default;
}
.tab:checked + label:hover {
box-shadow: 0 -1px 0 #fff inset;
background-color: #fff;
}
.tab:not(:checked) + label {
color:#fff;
}
.tab + label {
box-shadow: 0 -1px 0 #eee inset;
border-radius: 15px 15px 0 0;
cursor: pointer;
display: block;
text-decoration: none;
color: #333;
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
text-align: center;
background-color: #34404d;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
transition: 0.3s background-color ease, 0.3s box-shadow ease;
height: 80px;
box-sizing: border-box;
padding-top: 25px;
padding-bottom: 5px;
flex-wrap: wrap;
max-width: 90%;
}
.tab + label:hover {
background-color: #576c82;
box-shadow: 0 1px 0 #f4f4f4 inset;
}
.tab__content {
padding: 10px 25px;
background-color: transparent;
position: absolute;
width: 100%;
z-index: -1;
opacity: 0;
left: 0;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
border-radius: 6px;
}

Answer 1

制作flex-wrap:nowrap;并将min-width: 50%添加到tab类将确保导航选项卡不会进入不同的行。但是这样做会给您的选项卡内容带来问题。您甚至不能将它们移动到不同的元素，因为这样您选中的伪元素就不起作用了(它们只适用于后代或兄弟姐妹(。当然还有更好的解决方案，我不知道，但我意识到你可以按照

1. 由于您的问题归结为设置布局的布局，您可以使用网格而不是flex，因为您需要2D布局来防止导航选项卡换行。

2. 您可以利用位置，使选项卡内容的位置绝对相对于正文或导航选项卡。