ブロックレベル要素で 親要素と子要素の幅を同一にしたい。（親要素と同じサイズのwidth指定を、子要素ですると、レイアウトが崩れる理由がわかりません。

前提・実現したいこと

レイアウトで 親要素と子要素の幅を同一にしたい。

発生している問題・エラーメッセージ

レイアウトで 親要素と子要素の幅を同一にしたい。
親要素「chatmain」と同じサイズのwidth指定を、子要素「main-header」「messages」「form」ですると、
レイアウトが崩れる理由がわかりません。
基本的な考え方について教えてください。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="reset.css">
8    <link rel="stylesheet" href="style.css">
9    <title>chat-app</title>
10  </head>
11  <body>
12    <div class="wrapper">
13      <div class="chat-side">
14        <div class="side-header">
15        </div>
16        <div class="groups">
17        </div>
18      </div>
19      <div class="chat-main">
20        <div class="main-header">
21        </div>
22        <div class="messages">
23        </div>
24        <div class="form">
25        </div>
26      </div>
27    </div>
28  </body>
29</html>

css
1.wrapper {
2  display: flex;
3  height:100vh;
4  /* height:auto; */
5  /* height:100%; */
6}
7
8
9.chat-side {
10  background-color: #333333;
11  width: 300px;
12}
13
14.side-header {
15  background-color: #595959;
16  height:100px;
17}
18
19.groups {
20  background-color: #333333;
21  height: calc(100vh - 100px);
22}
23
24
25.chat-main {
26  background-color: #1a1d21;
27  width: calc(100% - 300px);
28}
29
30.main-header {
31  background-color: #3f3f3f;
32  height:100px;
33  width: calc(100% - 300px);
34}
35
36.messages {
37  background-color: #1a1d21;
38  height:calc(100% - 100px - 90px);
39  width: calc(100% - 300px);
40}
41
42.form {
43  background-color: #595959;
44  height:90px;
45  width: calc(100% - 300px);
46}
47

試したこと

子要素「main-header」「messages」「form」のwidthをそれぞれコメントアウト 

↓
幅が統一された！ 

↓
しかし今回、親要素に対して子要素のwidthサイズ無効にすると、
同一になる理由は不明です。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

レイアウトで親要素と子要素の幅を同一にしたい。
親要素「chatmain」と同じサイズのwidth指定を、子要素「main-header」「messages」「form」ですると、レイアウトが崩れる理由がわかりません。

width: calc(100% - 300px) は親要素の横幅から 300px 引いたときの横幅となります。そのため、これを指定された要素は親要素よりも 300px だけ横幅が小さくなります。親要素と一致する横幅は、子要素の width プロパティの値を 100% にするか (動作確認用リンク)、初期値 auto のままにしておくことで得られます (動作確認用リンク)。

CSS
1body {
2  margin: 0;
3}
4
5.wrapper {
6  display: flex;
7  height: 100vh;
8}
9
10
11.chat-side {
12  background-color: #333333;
13  width: 300px;
14}
15
16.side-header {
17  background-color: #595959;
18  height: 100px;
19}
20
21.groups {
22  background-color: #333333;
23  height: calc(100vh - 100px);
24}
25
26
27.chat-main {
28  background-color: #1a1d21;
29  width: calc(100% - 300px);
30}
31
32.main-header {
33  background-color: #3f3f3f;
34  height: 100px;
35  width: 100%;
36}
37
38.messages {
39  background-color: #1a1d21;
40  height: calc(100% - 100px - 90px);
41  width: 100%;
42}
43
44.form {
45  background-color: #595959;
46  height: 90px;
47  width: 100%;
48}

CSS
1body {
2  margin: 0;
3}
4
5.wrapper {
6  display: flex;
7  height: 100vh;
8}
9
10
11.chat-side {
12  background-color: #333333;
13  width: 300px;
14}
15
16.side-header {
17  background-color: #595959;
18  height: 100px;
19}
20
21.groups {
22  background-color: #333333;
23  height: calc(100vh - 100px);
24}
25
26
27.chat-main {
28  background-color: #1a1d21;
29  width: calc(100% - 300px);
30}
31
32.main-header {
33  background-color: #3f3f3f;
34  height: 100px;
35}
36
37.messages {
38  background-color: #1a1d21;
39  height: calc(100% - 100px - 90px);
40}
41
42.form {
43  background-color: #595959;
44  height: 90px;
45}