Flex item schrumpft nicht kleiner als sein Inhalt

Ich habe eine Liste von Elementen, die ich für den Benutzer zusammen mit einem Icon und zwei Buttons zeige. Soweit so gut, aber ich möchte, dass diese Liste auf Mobilgeräte skaliert und bei Bedarf verkleinert wird.Flex item schrumpft nicht kleiner als sein Inhalt

Wenn der Text in der Liste zu lang ist, wird verhindert, dass die Seite verkleinert wird und eine horizontale Bildlaufleiste angezeigt wird. Was ich versuche zu erreichen ist, dass der lange Beschreibungstext geschrumpft wird und die 3 Punkte am Ende (Ellipse) zeigt.

Das Containerelement wird als Flex angezeigt, und der Textcontainer hat Flex-Shrink 1, es wird jedoch weiterhin nicht verkleinert und übergelaufen.

Kann mir jemand sagen, was ich hier falsch mache? Warum weigert sich .mdc-list-item zu schrumpfen? Gibt es eine Möglichkeit, es bei Bedarf mit nur CSS zu verkleinern?

.mdc-list-item { 
 
    flex-shrink: 1; 
 
    min-width: 0; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.mdc-list { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script> 
 
<link href="https://unpkg.com/[email protected]/dist/material-components-web.css" rel="stylesheet" /> 
 
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;"> 
 
    <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;"> 
 
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1"> 
 
     <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear"> 
 

 
     <span class="mdc-list-item__text"> 
 
     Test Item 1 
 
     <span class="mdc-list-item__text__secondary">Test Item 1 Description</span> 
 
     </span> 
 

 
     <div class="mdc-list-item__end-detail"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button"> 
 
      X 
 
     </i> 
 
     </div> 
 
     <div class="mdc-list-item__end-detail" style="margin-left: 64px;"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button"> 
 
      Y 
 
     </i> 
 
     </div> 
 
    </li> 
 
    <li role="separator" class="mdc-list-divider"></li> 
 
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2"> 
 
     <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear"> 
 

 
     <span class="mdc-list-item__text"> 
 
     Test Item 2 
 
     <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span> 
 
     </span> 
 

 
     <div class="mdc-list-item__end-detail"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button"> 
 
      X 
 
     </i> 
 
     </div> 
 
     <div class="mdc-list-item__end-detail" style="margin-left: 64px;"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button"> 
 
      Y 
 
     </i> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Quelle

2017-11-23 Robert Koszewski

Manchmal braucht man bei alle flex Waren zu suchen (oben und unten die HTML-Struktur), und prüfen Sie, ob sie die overflow/min-width überschreiben müssen, um zu sehen.

In diesem Fall gibt es Flex-Elemente auf höheren Ebenen, die standardmäßig auf min-width: auto festgelegt sind, wodurch die Größenreduzierung verhindert wird.

.mdc-list-item { 
 
    flex-shrink: 1; 
 
    min-width: 0; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.mdc-list { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
/* RULES ADDED */ 
 
.mdc-list { 
 
    min-width: 0; 
 
} 
 
.mdc-list-item__text { 
 
    overflow: hidden; 
 
} 
 
.mdc-list-item__text__secondary { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script> 
 
<link href="https://unpkg.com/[email protected]/dist/material-components-web.css" rel="stylesheet" /> 
 
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;"> 
 
    <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;"> 
 
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1"> 
 
     <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear"> 
 

 
     <span class="mdc-list-item__text"> 
 
     Test Item 1 
 
     <span class="mdc-list-item__text__secondary">Test Item 1 Description</span> 
 
     </span> 
 

 
     <div class="mdc-list-item__end-detail"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button"> 
 
      X 
 
     </i> 
 
     </div> 
 
     <div class="mdc-list-item__end-detail" style="margin-left: 64px;"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button"> 
 
      Y 
 
     </i> 
 
     </div> 
 
    </li> 
 
    <li role="separator" class="mdc-list-divider"></li> 
 
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2"> 
 
     <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear"> 
 

 
     <span class="mdc-list-item__text"> 
 
     Test Item 2 
 
     <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span> 
 
     </span> 
 

 
     <div class="mdc-list-item__end-detail"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button"> 
 
      X 
 
     </i> 
 
     </div> 
 
     <div class="mdc-list-item__end-detail" style="margin-left: 64px;"> 
 
     <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button"> 
 
      Y 
 
     </i> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Mehr Details in diesem Beitrag:

Why doesn't flex item shrink past content size?

Quelle

2017-11-23 14:03:55

Flex item schrumpft nicht kleiner als sein Inhalt

Antwort

Verwandte Themen