이미지를 조상에 최대 높이 제한이있는 flex 아이템에 맞추는 방법은 무엇입니까?

Question

동일한 모양으로 공유 된 두 개의 수평 섹션을 표시하는 재사용 가능한 구성 요소가 있습니다. 두 섹션은 콘텐츠를 기반으로 균등하게 배분됩니다.

구성 요소를 https://jsfiddle.net/kezhuw/7pzmgz6c/2/에 게시합니다.

원하는 비전을 가지고 https://jsfiddle.net/kezhuw/7pzmgz6c/3/에 수정 된 버전을 게시하지만 img 태그에 직접 제한 max-height을 설정합니다.

max-height 제한 사항은 API로 제공되는 구성 요소 수준에서 설정해야합니다.

몇 가지주의 사항 : 구성 요소의

• 두 섹션 flex: 1 1 auto;을 가지고, "분배 균등이 내용에 따라"달성하기위한 방법이다.
• 구성 요소의 최대 높이 제한으로 인해 섹션 2의 제목은이 구성 요소에서 가장 긴 가로 콘텐츠 여야합니다. 이 주위에 공간이 분산되어야합니다. 그러나 그것은 object-fit: contain;으로 인해 아닙니다. object-fit: contains;이 없으면 이미지가 상위 div로 채워집니다. https://jsfiddle.net/kezhuw/7pzmgz6c/4/에서 확인할 수 있습니다.

HTML : < - 언어 : 랭 - HTML ->

<div class="device"> 
    <div class="app"> 

    <div class="component"> 
     <div class="section section1"> 
     <div class="logo"> 
      <img class="image" src="https://www.w3schools.com/css/img_lights.jpg" /> 
     </div> 
     <div class="title">Section One</div> 
     </div> 
     <div class="section section2"> 
     <div class="logo"> 
      <img class="image" src="https://www.w3schools.com/css/img_fjords.jpg" /> 
     </div> 
     <div class="title">Section Two: Another Title Here, Longer than first</div> 
     </div> 
    </div> 

    <div class="another-component"> 
     Another component 
    </div> 

    </div> 
</div> 

CSS :

.device { 
    width: 600px; 
    height: 1200px; 
} 

.app { 
    display: flex; 
    flex-flow: column nowrap; 
    border: thick solid purple; 
} 

.app > * { 
    min-height: 0; 
} 

.component { 
    /* 
    * max-height is an API exposed by this component, 
    * used by client to restrict max height of component. 
    * 
    * This API is exposed as raw css style, not an Vue/React prop. 
    * 
    * As an Vue/React Prop, it is possible to calculate max-height of image 
    * from this prop. I think this calculation process is not maintainable and the result 
    * may not accurate. 
    * 
    * Another way to solve this problem is to treat this max-height as the restriction 
    * of image, not the component. But I think that may not be friend to consumer. 
    */ 
    max-height: 120px; 
    display: flex; 
    border: thick solid lightseagreen; 
} 

.component > * { 
    min-width: 0; 
    flex: 1 1 auto; 
} 

.section1 { 
    background-color: yellow; 
} 

.section2 { 
    background-color: green; 
} 

.section { 
    display: flex; 
    flex-flow: column nowrap; 
    /* Align from bottom to top, to fix title at the bottom, 
    * even if there is no logo for this section. 
    */ 
    justify-content: flex-end; 
} 

.section > * { 
    min-height: 0; 
    text-align: center; 
} 

.title { 
    /* Don't shrink title */ 
    flex: 0 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.logo { 
    opacity: 0.5; 
    display: flex; 
    flex-flow: column nowrap; 
    align-items: center; 
} 

.logo > * { 
    min-height: 0; 
    min-width: 0; 
} 

.image { 
    max-height: 100%; 
    max-width: 100%; 
    object-fit: contain; 
    /* max-height: 70px; */ 
} 

.another-component { 
    font-size: 30px; 
    min-height: 50px; 
    background-color: darkslateblue; 
} 

Answer 1

.component > *에 대한 min-width: 0이 (min-width이 기본적으로 auto이므로주의 제거 플렉스 상품) 012에 추가 section1. 이렇게하면 section2이 아닌은 내용을 넘어서 축소 될 수 있습니다.

데모 다음과 updated fiddle 참조 :

.device { 
 
    width: 600px; 
 
    height: 1200px; 
 
} 
 

 
.app { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    border: thick solid purple; 
 
} 
 

 
.app > * { 
 
    min-height: 0; 
 
} 
 

 
.component { 
 
    /* 
 
    * max-height is an API exposed by this component, 
 
    * used by client to restrict max height of component. 
 
    * 
 
    * This API is exposed as raw css style, not an Vue/React prop. 
 
    * 
 
    * As an Vue/React Prop, it is possible to calculate max-height of image 
 
    * from this prop. I think this calculation process is not maintainable and the result 
 
    * may not accurate. 
 
    * 
 
    * Another way to solve this problem is to treat this max-height as the restriction 
 
    * of image, not the component. But I think that may not be friend to consumer. 
 
    */ 
 
    max-height: 120px; 
 
    display: flex; 
 
    border: thick solid lightseagreen; 
 
} 
 

 
.component > * { 
 
    /*min-width: 0;*/ /* REMOVED */ 
 
    flex: 1 1 auto; 
 
} 
 

 
.section1 { 
 
    background-color: yellow; 
 
    min-width: 0; /* ADDED */ 
 
} 
 

 
.section2 { 
 
    background-color: green; 
 
} 
 

 
.section { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    /* Align from bottom to top, to fix title at the bottom, 
 
    * even if there is no logo for this section. 
 
    */ 
 
    justify-content: flex-end; 
 
} 
 

 
.section > * { 
 
    min-height: 0; 
 
    text-align: center; 
 
} 
 

 
.title { 
 
    /* Don't shrink title */ 
 
    flex: 0 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.logo { 
 
    opacity: 0.5; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    align-items: center; 
 
} 
 

 
.logo > * { 
 
    min-height: 0; 
 
    min-width: 0; 
 
} 
 

 
.image { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    object-fit: contain; 
 
    /* max-height: 70px; */ 
 
} 
 

 
.another-component { 
 
    font-size: 30px; 
 
    min-height: 50px; 
 
    background-color: darkslateblue; 
 
}

<div class="device"> 
 
    <div class="app"> 
 

 
    <div class="component"> 
 
     <div class="section section1"> 
 
     <div class="logo"> 
 
      <img class="image" src="https://www.w3schools.com/css/img_lights.jpg" /> 
 
     </div> 
 
     <div class="title">Section One</div> 
 
     </div> 
 
     <div class="section section2"> 
 
     <div class="logo"> 
 
      <img class="image" src="https://www.w3schools.com/css/img_fjords.jpg" /> 
 
     </div> 
 
     <div class="title">Section Two: Another Title Here, Longer than first</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="another-component"> 
 
     Another component 
 
    </div> 
 

 
    </div> 
 
</div>