html - 元素宽度显示不正确

Question

问题是我的 header 的宽度固定为 150px，但在浏览器中它显示为 134.984px，我不明白为什么。我已经尝试了我能想到的一切，但没有任何效果。我唯一弄清楚的是 content-wrap flex item 插入 header 并使其变小。

这是 HTML:

/*======= Container =======*/

#container{
	display: flex;
	flex-direction: row;
	min-height: 100vh;
}

#content-wrap {
	width: 100%;
}
/*======= Sāna izvēlne / header =======*/

header {
	min-height: 100vh;
	width: 150px;
	margin: 0;
}

.header-position {
	width: inherit;
	height: 100vh;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

nav {
	background-color: #ffffff;
}

nav ul{
	padding: 0;
	margin: 0;
}

nav li, a {
	text-decoration: none;
	list-style-type: none;
	text-align: right;

	font-size: 1em;
	color: black;

}



.logo {

	background: url("../images/AG.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 80px;
}

/*======= Banneris =======*/

.banner-container {
	background-image: url("../images/lp-background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 300px;
	clear: right;
}

.banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.banner h1 {
	color: white;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.4em;
	border: solid 10px white;
	padding: 20px 30px;
}

/*======= Par mums =======*/

#about {
	width: 100%;
	height: 300px;
	background-color: pink;
}

#about .first, .second {
	width: 50%;
	height: 100%;
	display: inline-block;
}

#about .first {

}
#about .second {
	float: right;
}

.about-picture {
	height: 200px;
	width: 200px;
	margin: 50px 50px;
	border-radius: 150px;
	border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
	float: right;
}
img.right {
	float: right;
}

<div id="container">
	<header>
		<div class="header-position">
			<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>

			<nav>
		 		<ul>
		 			<li><a href="#">Sākums</a></li>
					<li><a href="#">Attēli</a></li>
					<li><a href="#">Kontakti</a></li>
					<li><a href="#">Par mums</a></li>
		 		</ul>
		 	</nav>
			<a href="mailto:">Sazinies ar mums</a>
		</div>
	</header>

	<div id="content-wrap">

			<div class="banner-container">

				<span class="banner"><h1>Whatever</h1></span>

			</div>

			<div id="about">
				<div class="first">
					<img class="about-picture left" src="./images/lp-background.jpg" alt="" />

				</div>
				<div class="second">
					<img class="about-picture right" src="./images/lp-background.jpg" alt="" />

				</div>
			</div>

	</div>

如何让“标题”正确显示？

Answer 1

因为它是一个 flex 元素，所以您需要相应地设置它的 flex 属性。

header {
    min-height: 100vh;
    width: 150px;
    margin: 0;
    background-color: red;
    flex: 0 0 150px; /* don't grow, don't shrink, be 150px wide */
  }

/*======= Container =======*/

#container {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
#content-wrap {
  width: 100%;
}
/*======= Sāna izvēlne / header =======*/

header {
  min-height: 100vh;
  width: 150px;
  margin: 0;
  background-color: red;
  flex: 0 0 150px;
}
.header-position {
  width: inherit;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
nav {
  background-color: #ffffff;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav li,
a {
  text-decoration: none;
  list-style-type: none;
  text-align: right;
  font-size: 1em;
  color: black;
}
.logo {
  background: url("../images/AG.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px;
}
/*======= Banneris =======*/

.banner-container {
  background-image: url("../images/lp-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px;
  clear: right;
}
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.banner h1 {
  color: white;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.4em;
  border: solid 10px white;
  padding: 20px 30px;
}
/*======= Par mums =======*/

#about {
  width: 100%;
  height: 300px;
  background-color: pink;
}
#about .first,
.second {
  width: 50%;
  height: 100%;
  display: inline-block;
}
#about .first {} #about .second {
  float: right;
}
.about-picture {
  height: 200px;
  width: 200px;
  margin: 50px 50px;
  border-radius: 150px;
  border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
  float: right;
}
img.right {
  float: right;
}

<div id="container">
  <header>
    <div class="header-position">
      <img class="logo" src="./images/AG.svg" alt="AG Logo"></img>

      <nav>
        <ul>
          <li><a href="#">Sākums</a>
          </li>
          <li><a href="#">Attēli</a>
          </li>
          <li><a href="#">Kontakti</a>
          </li>
          <li><a href="#">Par mums</a>
          </li>
        </ul>
      </nav>
      <a href="mailto:">Sazinies ar mums</a>
    </div>
  </header>

  <div id="content-wrap">

    <div class="banner-container">

      <span class="banner"><h1>Whatever</h1></span>

    </div>

    <div id="about">
      <div class="first">
        <img class="about-picture left" src="./images/lp-background.jpg" alt="" />

      </div>
      <div class="second">
        <img class="about-picture right" src="./images/lp-background.jpg" alt="" />

      </div>
    </div>

  </div>