HTML/CSSブロックに収まらず、固定された高さを持たない要素を隠す

Question

基本的には、ページを2つの部分（2/3と1/3）に分割しました。左側には動的コンテンツがあり、それは私のグリッドのメインです。右側にも動的コンテンツがあり、画像+テキスト。

私は、グリッド、次のしている：あなたが見

article { 
 
    width: 66.6%; 
 
    box-sizing: border-box; 
 
    background: red; 
 
} 
 

 
aside { 
 
    width: 33.4%; 
 
    background: blue; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    left: 66.6%; 
 
    overflow: hidden; 
 
    top: 0; 
 
    bottom: 0; 
 
    font-size: 18px; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    position: relative; 
 
}

<div class='wrapper'> 
 
<article> 
 
    text 
 
    <br> 
 
    text 
 
</article> 
 

 
    <aside> 
 
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg"> 
 
    </aside> 
 
</div>

を、画像が切断され、これは基本的なオーバーフロー・ロジックです。しかし、私がしたいことは、あふれているならこの絵を見せないことです。

Answer 1

私はJSせずにこれを達成するための他の方法がない、これは私が他がない理解したよう

if ($('img').height() > $('article').height()) { 
 
    $('img').css('display', 'none'); 
 
}

article { 
 
    width: 66.6%; 
 
    box-sizing: border-box; 
 
    background: red; 
 
} 
 

 
aside { 
 
    width: 33.4%; 
 
    background: blue; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    left: 66.6%; 
 
    overflow: hidden; 
 
    top: 0; 
 
    bottom: 0; 
 
    font-size: 18px; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class='wrapper'> 
 
    <article> 
 
    text 
 
    <br> text 
 
    </article> 
 

 
    <aside> 
 
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg"> 
 
    </aside> 
 
</div>