子要素の高さに合わせて親要素の高さを変更したい

Question

前提・実現したいこと

子要素の高さに応じて、親要素の高さを変更したいです。

###状況
メルカリのようなサイトを模写しているんですけど、サイドバー(左側)をクリックするとメイン(右側)部分の高さが子要素に応じて変更されるようにしたいです。

・現在の状況

・実現したい状況

該当のソースコード

・左カラムと右カラム

// マイページ全体
.user-showPage {
  background-color: #f5f5f5;
  &__main {
    padding: 50px 120px;
    display: flex;
  }
}
// サイドバー上部
.sideBar-Top {
  width: 400px;
  background-color: #ffffff;
}
.sideBar-contents li {
  position: relative;
  height: 50px;
  border-bottom: groove 1px;
  background-color: #ffffff;
  a {
  text-decoration: none;
  font-size: 18px;
  color: black;
  line-height: 50px;
  padding-left: 15px;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  }
  a:hover {
    opacity: 0.6;
    background: #333;
    color: #fff;
  }
}

// サイドバー下部
.sideBar-Low {
  h2 {
  font-size: 24px;
  font-weight: bold;
  padding-top: 30px;
  }
}

親要素

.main-information
  - if current_page?(logout_index_path)
    .logout-btn
      = link_to "ログアウト", "/"

.main-information {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-left: 100px;
}

子要素

.user-showPage
  .user-showPage__main
    = render "users/side_bar"
    = render "users/main_information"

.logout-btn {
  position: relative;
  width: 300px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 10px;
  text-align: center;
  a {
    line-height: 50px;
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

試したこと

親要素にheight: auto;をした
display: inline-blockを親要素に試したが実現できなかった

参考サイト

https://techacademy.jp/magazine/26588
親要素の高さを子要素にする

Comments

[hatena19]

現状の HTMLコードも提示してください。あと、CSSの文法に沿っていないですが、SCSSですか。もし、そうならタグに追加してください。

[susume]

HTML追記しました。

CSSではなくSCSSです。

[FrontEnd_Japan]

左カラムと右カラムを含めた親のCSSも記載いただけますか？？

[susume]

追記いたしました。

Answer 1

.main-informationのheightを100%に変更してみては如何でしょうか。

flexは横の高さに自動的に調整されるので明示的に高さを指定する必要があります。

{
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-left: 100px;
}
↓
{
  width: 100%;
  height:100%;
  background-color: #ffffff;
  margin-left: 100px;
}

サンプルコードを作成したのでご確認ください。
Codepen

Comments

[susume]

解決しました！！

height: 100%にすればよかったんですね。
勉強になりました。