メインとサイドバーを一緒に縮小するようにしたい

Question

前提・実現したいこと

下記のリンクのサイトのメイン部分とサイドバーを作りたい。
参考
メイン部分とサイドバー部分の設計がうまくいかず、画面を小さくするとメイン部分は縮小するがサイドバーの大きさは変わらない。
両方一緒に縮小するようにしたい。

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

メイン部分とサイドバー部分を一緒に縮小するようにしたいのだがメイン部分しか縮小しない。

該当のソースコード

        <!-- メインコンテンツ -->
        <div class="main-contents">
            <h4 class="main-contents__title"></h4>
            <div class="main-contents__box">
                <div class="main-contents__list">
                    <article class="main-contents__block">
                        <figure class="main-contents__image">
                            <a href="#">
                                <img src=">
                            </a>
                        </figure>
                        <section class="main-contents__texts">
                            <p class="main-contents__time">2020/09/09</p>
                            <h2><a href="">タイトル</a></h2>

                            <p class="main-contents__description">テキスト</p>
                        </section>
                        <p class="btn"><a href="#">テキスト</a></p>
                    </article>

                 


                <!-- サイドバー -->
                <div class="sidebar">
                    <div class="sidebar-profile">
                        <h4 class="sidebar-title">About me</h4>
                        <p class="profile-image"><img src="<></p>
                        <h4 class="sidebar-name">おるか</h4>
                        <p class="profile-text">
                            テキスト</p>
                        <div class="profile-link">
                            <p><a href="#">テキストテキストテキスト</a></p>
                            <p><a href="#">テキストテキストテキスト</a></p>
                            <p><a href="#">テキストテキストテキスト</a></p>
                            <p><a href="#">テキストテキストテキスト</a></p>
                        </div>
                    </div>

.main {
    background-color: $main;
    width: 100%;
   
    .page-main {
        max-width: 1024px;
        margin: 0 auto;
        

        .main-list {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 30px;
            @include common-block();
            
        }
    }

    .main-contents {
        max-width: 1024px;
        margin: 0 auto;
        

        
 
           

            
            
        }
        .main-contents__box {
            display: flex;
            justify-content: space-evenly;
            
            .main-contents__list {
                margin-left: 30px;
               
                
                
                
                @include common-block("large");
                
            }
        }
    }

    

    .sidebar{
       
        margin-left: 30px;
        max-width: 1024px;
        width: auto;
      
            }

          

 @else if( $type == 'large' ){
    //スタイル
    .main-contents__block{
        list-style: none;
        width:100%;
        display: block;
        max-width: 100%;
        border: 1px solid $main;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 8px gray;      
        @include btn();
        text-align: center;
        margin-bottom: 60px;
        .main-contents__image{
            max-width: 775px;
               
            a{
                display: block;
                
                img{
                    
                    width: 100%;

                    height: 100%;
                    max-height: 600px;
                    object-fit: cover;
                    background-size: cover;
                    
                }
            }
        }
        
         }
      
    }
  }

}

試したこと

widthを%でおいてみたが変化はなかった。

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

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

Answer 1

このような形でいかがでしょうか?

.main-contents__block {
  width: 75%;
}
.sidebar {
  width: calc(25% - 30px); /* 30pxは余白 */
}

Comments

[ral819]

ありがとうございます！
うまくいきました！