質問: 説明が悪すぎたのか回答が得られなかった為、再度説明を書き直して図も入れました。ご回答頂けたら嬉しいです。 bootstrap 3 + sassを用いて全体の構成が図-1になるような組み方をしています。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/756b576b127ddc7d2714b4eddff0a91d.jpeg) 問題は赤枠の中なのですが、rightBoxのoverflowを有効かつブラウザ幅によってheightの値が可変する仕様であるleftBoxの高さに揃えるため下記のような組み方をした場合、図-2・図-3で説明しているように、ブラウザサイズを狭めるとrightBoxは高さが固定されているためleftBoxの高さを超えて表示されてしまいます。これをブラウザ幅を変更した場合でもrightBoxの高さをleftBoxの高さにリアルタイムに揃える事はCSSのみで可能でしょうか? ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/738ce69a8e0950590514ac2202d422f7.jpeg) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ed3fc5d99639731601fa6d019b145c1f.jpeg) ``` list text list text ・ ・ ・ description text description text ・ ・ ・ ``` ``` .BOX { width: 100%; .leftBox, .rightBox { width: 50%; } .leftBox { .list { height: 100px; overflow: auto; } img { width: 100%; /* 元の 幅/高さ を 500px/100px と仮定しています */ } } .rightBox { .inner { widrh: 100%; height: 400px; overflow: auto; .wrap { height: 100px; } } } } ```
回答: CSSのメディアクエリーは使用されましたでしょうか? 見当違いでしたらすみません。 ``` @media (min-width: 500px) and (max-width: 600px) { ↑変更される範囲 ここに変更後のcssを記述 } ```