<select> の親要素の高さを、<select> と同じにしたいのですが、box-sizing が効きません

前提

<select>の親要素にborderを指定しているのですが、その高さ調整に苦戦しています。

実現したいこと

<select>の親要素の高さを、<select>と同じにしたいです。

発生している問題

<select>よりも、親要素の方がborderの分だけ高くなってしまいます。

該当のソースコード

html
1<div class="select_box1">
2	<select>
3		<option value="a">a</option>
4		<option value="b">b</option>				
5	</select>
6	<button>実行</button>
7</div>

css
1* {
2	box-sizing: border-box;
3}
4
5.select_box1 {
6	border: 1px solid black;
7	display: inline-flex;
8}
9
10select {
11	height: 30px;
12	min-height: 30px;
13	display: flex;
14	align-items: center;
15	justify-content: center;
16	border: none;
17	border-radius: 0;  
18}
19
20button {
21	border: none;
22	background: skyblue;
23}

試したこと

上記ではbox-sizing: border-box;が効いていないために、親要素（.select_box1）が、borderの分の高さを持ってしまうのだと考えました。

そこで box-sizing: border-box が効かない時にまず確認することを参照し、次のwidthを追加しましたが、.select_box1は変わらず高いままでした。

css
1/* widthを追加 */
2select {
3	width: 50px; 
4}

尚、親要素にもheight: 30px;をかければ同じ高さになりますがこれは避けたいと考えています。
（.select_box1だけでなく、select_box2やselect_box3などがたくさんあり、それらに同じcssを付与したり、同じクラスを付与したりすることを避けたいためです。）

補足情報

誠に僭越ながら、scssなどでなく通常cssでの記述でのご指導をお願いできましたら幸いです。

宜しくお願い致します。

Lhankor_Mhy

2022/06/16 01:07

ご提示のjsFiddleを拝見しましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

Lhankor_Mhy

2022/06/16 01:30

もしかして、ボーダーも含めた.select_box1の高さを、selectの高さと合わせたい、ということでしょうか？つまり、select がはみ出すようにしたい、という理解で合っていますか？

nikuatsu

2022/06/16 04:10

コメントありがとうございます。不明瞭な内容で申し訳ございません。 > もしかして、... はい、仰る通りです。 > つまり、... いえ、はみ出したいという意図ではなく、同じにしたいという意図です。

行動規範の内容に同意します

回答2件

無理やり位置を合わせるならば、ネガティブマージンを使ってこんな感じでしょうか。

css
1select {
2	height: 30px;
3	min-height: 30px;
4	display: flex;
5	align-items: center;
6	justify-content: center;
7	border: none;
8	border-radius: 0;  
9	position: relative;
10	z-index: -1;
11	margin: -1px auto;
12}