2
CSSフレックスを使用してレスポンシブにしようとしているヘッダーメニューがあります。divの高さをできるだけ小さくするには？
フレックス機能はうまく機能しますが、何らかの理由でアイテムの高さが常に大きくなります。
私が使用しているコードは以下のとおりです（境界線は要素の高さを示すためのものです）。
というタイトルの高さは、<p>要素の高さに一致するように縮小する必要があります。誰もこれを行う方法を知っていますか？
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height:auto;
position: fixed;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
align-items: center;
color:white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 1em;
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}<body>
<div id="header">
<div id="title"><p>EXAMPLE SITE NAME</p></div>
<div id="menuBar"><p>Menu</p>
</div>
<div id="social"><p>Socials</p></div>
</div>
</body>