レシポンシブのtab型メニューで困ってます

質問

レシポンシブのtab型メニューが上手くできなくて困ってます。
希望は、表示する枠の高さは固定、表示するリストが多くなれば縦のスクロールバーが自動的に表示される、レシポンシブに対応です。jQueryが上手く動かなくなる可能性があるのでCSSのみで動くソースがネット上に掲載されていたものを自分流にアレンジしてみました。作成後Google Chromeのデヴェロッパーツールでレシポンシブを検証すると、縦のスクロールバーは一瞬表示されますがマウスを適当に動かすと消えて機能しません。ソースは以下です。
html
<div class="tab5">
<div class="tab-content">
<input id="tab5-1" type="radio" name="tab5" checked>
<label for="tab5-1">1</label>
<input id="tab5-2" type="radio" name="tab5">
<label for="tab5-2">2</label>
<input id="tab5-3" type="radio" name="tab5">
<label for="tab5-3">3</label>
<input id="tab5-4" type="radio" name="tab5">
<label for="tab5-4">4</label>
<div id="tab5-b1" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ1</p>
</div>
<div id="tab5-b2" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ2</p>
<p>コンテンツ2</p>
</div>
<div id="tab5-b3" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ3</p>
<p>コンテンツ3</p>
<p>コンテンツ3</p>
</div>
<div id="tab5-b4" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
</div>
<!--tab-content--></div>
<!--tab5--></div>

css
.tab5{
width: 100%;
min-width: 320px;
margin : 0px auto 20pt;
}
.tab5 .tab-content{
margin: 0 10px;
}
.tab5 label{
display: inline-block;
margin: 0;
padding: 0;
}
.tab5 label{
display: inline-block;
width: 78px;
padding: 3px 10px;
cursor: pointer;
background: #ddd;
color: #777;
margin-right: -2px;
}
.tab5 label:hover{
background: #eee;
}
.tab5 input:checked + label{
background: #9fb7d4;
color: white;
padding: 5px 10px 3px 10px;
}
.tab5 input{
display: none;
}
.tab5 #tab5-b1,
.tab5 #tab5-b2,
.tab5 #tab5-b3,
.tab5 #tab5-b4{
display: none;
padding: 10px;
}
.tab5 #tab5-1:checked ~ #tab5-b1,
.tab5 #tab5-2:checked ~ #tab5-b2,
.tab5 #tab5-3:checked ~ #tab5-b3,
.tab5 #tab5-4:checked ~ #tab5-b4{
display: block;
border: 1px solid #9fb7d4;
}
また、html中の style="width: 100%;height : 100px;overflow-x: hidden;"をcssに記述したいのですがどこに付加していいのかわかりません。
htmlを勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。
よろしくお願いいたします。

回答No.1

4017B · ベストアンサー

とりあえずHTML内部に記述されてる「style="～"」の部分を全削除して…

.tab-content > div { width:100%; height:100px; overflow:auto; }

～以上の記述例に倣ったスタイルを適当な箇所に追記してみてください。

お礼

ありがとうございました。うまくいきました