HTML, flex, 한 행의 두 div, 한 div의 크기가 더 작음을 지정합니다.

Question

Subj.

두 개의 div (왼쪽 및 오른쪽)가 있습니다. 그리고 왼쪽 div가 주요 div처럼 보이도록하고 오른쪽 div가 왼쪽 div와 동일한 높이를 갖도록하고 싶습니다. 더 많은 내용을 포함 할지라도 (overflow: hidden). css 및 html을 js없이 작성하는 방법이 있으면 감사하겠습니다.

.parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
} 
 

 
.children-1 { 
 
    width: 66.6%; 
 
    background: green; 
 
} 
 

 
.children-2 { 
 
    width: 33.4%; 
 
    background: yellow; 
 
}

<div class="parent"> 
 
    <div class="children-1"> 
 
    <p>My content</p> 
 
    </div> 
 
    
 
    <div class="children-2"> 
 
    <p>a lot of content<p> 
 
    <p>a lot of content</p> 
 
    </div> 
 
</div>

Answer 1

이 컨테이너에 고정 된 높이를 적용하고 두 번째 자식 DIV에 overflow-y: hidden;을 사용합니다 :

.parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    height: 200px; 
 
} 
 

 
.children-1 { 
 
    width: 66.6%; 
 
    background: green; 
 
} 
 

 
.children-2 { 
 
    width: 33.4%; 
 
    background: yellow; 
 
    overflow-y: hidden; 
 
}

<div class="parent"> 
 
    <div class="children-1"> 
 
    <p>My content</p> 
 
    </div> 
 
    
 
    <div class="children-2"> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    </div> 
 
</div>

다음

어떻게 내 마크 업이 찾고 작은 조각이다

여기에는 고정 된 높이가없는 두 번째 버전이 있지만 HTML 구조가 변경되었습니다. 하나의 하위 항목 (오른쪽 항목)이 있으며 첫 번째 하위 항목의 내용이 이제 부모 항목에 있습니다. 그것은 그 아이의 요소에 대해 절대 위치를 사용하고 자식 요소의 오버 플로우를 숨 깁니다 - 아래의 실제 설정을 참조하십시오 물론

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
    padding: 1em; 
 
    background: green; 
 
    overflow-y: hidden; 
 
} 
 

 
.children-2 { 
 
    width: 33.4%; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: yellow; 
 
}

<div class="parent"> 
 
    <p>My content</p> 
 
    <p>My content</p> 
 

 
    <div class="children-2"> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    <p>a lot of content</p> 
 
    </div> 
 

 
</div>

Answer 2

예! 그냥 CSS 그리드를 사용하십시오 !!

.parent { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
} 
.children-1 { 
    background: green; 
} 
.children-2 { 
    background: yellow; 
    overflow-y: hidden; 
    max-height: 200px; // Limit the height 
} 

https://codepen.io/Konrad001/pen/MOxzEe