66020


## 質問内容

左側のメニューのlabelを押すと、右側のメインメニューが干渉して動き、灰色の背景が現れます。  
原因は分かりましたが、理由と対処法がわかりません。  
よろしくお願いします。  
[jsfiddle](https://jsfiddle.net/akatsuki1910/oh67vk8m/)

## コード

[code]

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div class="main-all-wrap">
            <div class="index-all-wrap">
                <div class="profile">
                    <div class="profile-box">
                        <img src="#" class="trim-image-to-circle">
                        <div class="pro-name">a</div>
                        <div class="pro-text">
                            afa
                        </div>
                        <div class="pro-link">
                            <a href="#"><i class="fab fa-twitter-square"></i></a>
                            <a href="#"><i class="fab fa-facebook"></i></a>
                            <a href="#"><i class="fab fa-instagram-square"></i></a>
                        </div>
                    </div>
                    <div class="pro-menu">
                        <label for="menu_bar1">label1</label>
                        <input type="checkbox" id="menu_bar1">
                        <ul id="links1">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                        <label for="menu_bar2">label2</label>
                        <input type="checkbox" id="menu_bar2">
                        <ul id="links2">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                        <label for="menu_bar3">label3</label>
                        <input type="checkbox" id="menu_bar3">
                        <ul id="links3">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                        <label for="menu_bar4">label4</label>
                        <input type="checkbox" id="menu_bar4">
                        <ul id="links4">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                        <label for="menu_bar5">label5</label>
                        <input type="checkbox" id="menu_bar5">
                        <ul id="links5">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                        <label for="menu_bar6">label6</label>
                        <input type="checkbox" id="menu_bar6">
                        <ul id="links6">
                            <li><a href="#">Link01</a></li>
                            <li><a href="#">Link02</a></li>
                        </ul>
                    </div>
                </div>
                <div class="main-contents-wrap">
                    <div class="contents-main">
                        <img src="#">
                        <div class="main-title">{$maintitle}</div>
                        <div class="sub-title">{$subtitle}</div>
                        <div class="sub-title">{$subtitle}</div>
                        <div class="main-text">{$maintext}</div>
                        <a href="#" target="_self"></a>
                    </div>
                    <div class="contents-main">
                        <img src="#">
                        <div class="main-title">{$maintitle}</div>
                        <div class="sub-title">{$subtitle}</div>
                        <div class="sub-title">{$subtitle}</div>
                        <div class="main-text">{$maintext}</div>
                        <a href="#" target="_self"></a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    </html>
    
[/code]

[code]

    @mixin center() {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    @mixin flexcenter() {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    $header-height:100px;
    $menu-box-wigth:400px;
    $pic-size-width:400px;
    $pic-size-height:300px;
    
    * {
        margin: 0;
        padding: 0;
    }
    
    html {
        height: 100%;
    }
    
    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    
    .main-all-wrap {
        margin-top: $header-height;
        flex: 1 0 auto;
    }
    
    .index-all-wrap {
        display: flex;
        flex-direction: row;
    }
    
    $profile-width:25vmin;
    
    .profile {
        width: $profile-width;
    
        .profile-box {
            width: 100%;
            background-color: red;
    
            .trim-image-to-circle {
                width: calc(#{$profile-width} - 2px);
                height: calc(#{$profile-width} - 2px);
                border-radius: 50%;
                border: 1px solid black;
            }
    
            .pro-name {
                font-size: 2rem;
            }
    
            .pro-text {
                word-break: break-all;
            }
    
            .pro-link {
                font-size: 2rem;
    
                a {
                    color: black;
                    text-decoration: none;
    
                    :visited,
                    :hover {
                        color: black;
                    }
                }
            }
        }
    
        .pro-menu {
            width: $profile-width;
    
            a {
                display: block;
                padding: 15px;
                text-decoration: none;
                color: #000;
            }
    
            ul {
                margin: 0;
                padding: 0;
                background: #f4f4f4;
                list-style: none;
            }
    
            li {
                height: 0;
                overflow: hidden;
                transition: all 0.5s;
            }
    
            input {
                display: none;
            }
    
            label {
                display: block;
                margin: 0 0 4px 0;
                padding: 15px; //To Do 原因
                line-height: 1;
                color: #fff;
                background: green;
                cursor: pointer;
            }
    
            @for $i from 1 through 7 {
                #menu_bar#{$i}:checked~#links#{$i} li {
                    height: calc(15px *2 + 1rem + 4px);
                    opacity: 1;
                }
            }
        }
    }
    
    
    .main-contents-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    
        .contents-main {
            width: calc(100% - 20px);
            max-width: $pic-size-width + 200px;
            margin: 5px 10px;
            position: relative;
            background-color: #999999;
            display: grid;
            grid-template-rows: 20% 20% calc(#{$pic-size-width} - 40%);
            grid-template-columns: $pic-size-width 1fr;
    
            img {
                grid-row: 1 /span 3;
                grid-column: 1;
                min-width: $pic-size-width;
                max-width: $pic-size-width;
                min-height: $pic-size-height;
                max-height: $pic-size-height;
                object-fit: cover;
                background-color: black;
            }
    
            .main-title {
                grid-row: 1;
                grid-column: 2;
                font-size: 2rem;
                max-height: calc(#{$pic-size-height} * 0.2);
                position: relative;
                overflow: hidden;
                word-wrap: break-word;
            }
    
            .sub-title {
                grid-row: 2;
                grid-column: 2;
                font-size: large;
                max-height: calc(#{$pic-size-height} * 0.2);
                position: relative;
                overflow: hidden;
                word-wrap: break-word;
            }
    
            .main-text {
                grid-row: 3;
                grid-column: 2;
                max-height: calc(#{$pic-size-height} * 0.6);
                position: relative;
                overflow: hidden;
                word-wrap: break-word;
            }
    
            a {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }
        }
    }
    
[/code]


CC BY-SA 4.0
2020-04-27T05:11:12.527
66018
2020-04-27T06:14:44.333
2020-06-17T08:14:45.997
-1
29881
question
html css sass
Flexboxで隣り合う要素の高さが揃ってしまう


質問文のコードを読むと、 `.profile` と `.main-contents-wrap` を横並びにするために `.index-all-wrap` で
`display: flex` を使用しています。ここで、 flexbox で使用される `align-items` プロパティは
**初期値が`stretch`** であるため、 `.profile` と `.main-contents-wrap` の **高さが自動的に揃えられる**
とわかります。このため、メニューをクリックし、メニューの高さがメインコンテンツより大きくなると、メニューと高さを合わせるために、メインコンテンツに灰色の領域が生じます。

以上から、この問題を解決するには、 `align-items` プロパティに対して `stretch`
以外の値を適用すれば良いことになります。たとえば、以下のように `align-items: start` を適用すると問題が解消していることが確認出来ます。

[code]

    .index-all-wrap {
      display: flex;
      flex-direction: row;
      align-items: start; // 追加
    }
    
[/code]

[code]

    * {
      margin: 0;
      padding: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    
    .main-all-wrap {
      margin-top: 100px;
      flex: 1 0 auto;
    }
    
    .index-all-wrap {
      display: flex;
      flex-direction: row;
      align-items: start; /* 追加 */
    }
    
    .profile {
      width: 25vmin;
    }
    .profile .profile-box {
      width: 100%;
      background-color: red;
    }
    .profile .profile-box .trim-image-to-circle {
      width: calc(25vmin - 2px);
      height: calc(25vmin - 2px);
      border-radius: 50%;
      border: 1px solid black;
    }
    .profile .profile-box .pro-name {
      font-size: 2rem;
    }
    .profile .profile-box .pro-text {
      word-break: break-all;
    }
    .profile .profile-box .pro-link {
      font-size: 2rem;
    }
    .profile .profile-box .pro-link a {
      color: black;
      text-decoration: none;
    }
    .profile .profile-box .pro-link a :visited,
    .profile .profile-box .pro-link a :hover {
      color: black;
    }
    .profile .pro-menu {
      width: 25vmin;
    }
    .profile .pro-menu a {
      display: block;
      padding: 15px;
      text-decoration: none;
      color: #000;
    }
    .profile .pro-menu ul {
      margin: 0;
      padding: 0;
      background: #f4f4f4;
      list-style: none;
    }
    .profile .pro-menu li {
      height: 0;
      overflow: hidden;
      transition: all 0.5s;
    }
    .profile .pro-menu input {
      display: none;
    }
    .profile .pro-menu label {
      display: block;
      margin: 0 0 4px 0;
      padding: 15px;
      line-height: 1;
      color: #fff;
      background: green;
      cursor: pointer;
    }
    .profile .pro-menu #menu_bar1:checked ~ #links1 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar2:checked ~ #links2 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar3:checked ~ #links3 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar4:checked ~ #links4 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar5:checked ~ #links5 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar6:checked ~ #links6 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    .profile .pro-menu #menu_bar7:checked ~ #links7 li {
      height: calc(15px *2 + 1rem + 4px);
      opacity: 1;
    }
    
    .main-contents-wrap {
      width: 1fr;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    .main-contents-wrap .contents-main {
      width: calc(100% - 20px);
      max-width: 600px;
      margin: 5px 10px;
      position: relative;
      background-color: #999999;
      display: grid;
      grid-template-rows: 20% 20% calc(400px - 40%);
      grid-template-columns: 400px 1fr;
    }
    .main-contents-wrap .contents-main img {
      grid-row: 1/span 3;
      grid-column: 1;
      min-width: 400px;
      max-width: 400px;
      min-height: 300px;
      max-height: 300px;
      object-fit: cover;
      background-color: black;
    }
    .main-contents-wrap .contents-main .main-title {
      grid-row: 1;
      grid-column: 2;
      font-size: 2rem;
      max-height: calc(300px * 0.2);
      position: relative;
      overflow: hidden;
      word-wrap: break-word;
    }
    .main-contents-wrap .contents-main .sub-title {
      grid-row: 2;
      grid-column: 2;
      font-size: large;
      max-height: calc(300px * 0.2);
      position: relative;
      overflow: hidden;
      word-wrap: break-word;
    }
    .main-contents-wrap .contents-main .main-text {
      grid-row: 3;
      grid-column: 2;
      max-height: calc(300px * 0.6);
      position: relative;
      overflow: hidden;
      word-wrap: break-word;
    }
    .main-contents-wrap .contents-main a {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="jp">
    
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TopPage</title>
      </head>
    
      <body>
        <div class="main-all-wrap">
          <div class="index-all-wrap">
            <div class="profile">
              <div class="profile-box">
                <img src="#" class="trim-image-to-circle">
                <div class="pro-name">a</div>
                <div class="pro-text">
                  afa
                </div>
                <div class="pro-link">
                  <a href="#"><i class="fab fa-twitter-square"></i></a>
                  <a href="#"><i class="fab fa-facebook"></i></a>
                  <a href="#"><i class="fab fa-instagram-square"></i></a>
                </div>
              </div>
              <div class="pro-menu">
                <label for="menu_bar1">label1</label>
                <input type="checkbox" id="menu_bar1">
                <ul id="links1">
                  <li><a href="#">Link01</a></li>
                  <li><a href="#">Link02</a></li>
                </ul>
                <label for="menu_bar2">label2</label>
                <input type="checkbox" id="menu_bar2">
                <ul id="links2">
                  <li><a href="#">Link01</a></li>
                  <li><a href="#">Link02</a></li>
                </ul>
              </div>
            </div>
            <div class="main-contents-wrap">
              <div class="contents-main">
                <img src="#">
                <div class="main-title">{$maintitle}</div>
                <div class="sub-title">{$subtitle}</div>
                <div class="sub-title">{$subtitle}</div>
                <div class="main-text">{$maintext}</div>
                <a href="#" target="_self"></a>
              </div>
            </div>
          </div>
        </div>
      </body>
    
    </html>
[/code]


CC BY-SA 4.0
2020-04-27T05:38:49.503
66020
2020-04-27T06:03:28.727
2020-04-27T06:03:28.727
32986
32986
66018
answer