Flex nicht nehmen Breite

Question

Ich habe folgendes reaktions flex Layout aber die .image-holder wird die richtige Breite nicht nehmen - es scheint nur nach der Größe verändert werden, wie viel Text ist in der text-holder

.pdf-link-list { 
 
    list-style: none; 
 
    padding: 1em 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.pdf-link-list .column { 
 
    width: 50%; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 
.pdf-link-list .link { 
 
    display: flex; 
 
    text-decoration: none; 
 
    align-items: center; 
 
    width: 100%; 
 
} 
 
.pdf-link-list .image-holder { 
 
    padding-right: 15px; 
 
    width: 35%; 
 
} 
 
.pdf-link-list .width100 { 
 
    width: 100%; 
 
} 
 
.pdf-link-list .text-holder { 
 
    flex-grow: 1; 
 
}

<ul id="laying-patterns-links" class="pdf-link-list"> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
</ul>

weiß jemand, was ich von diesem fehlte, dachte ich, weil ich die .image-holder ein flex-grow:1 ein width und die .text-holder gab, die .image holder gleich bleiben soll, während der Text Halter erweitert.

Ich bin neu so biegen möchte verstehen, warum es in der Art und Weise verhält es

ist

EDIT

Leider die feste Breite für die Bildhalter oben ist nur für die Demonstration als Die tatsächlichen Werte zeigten das Problem nicht gut auf dem Snippet. Die realen Werte für die Bildhalter Breite:

width: 35%; min-width: 100px; max-width:250px; (instead of width:150px;) 

Warum sind nicht alle Bildhalter 35% breit, wenn alle Bilder in ihnen die gleiche Größe haben?

Answer 1

geben Sie Ihre .image-holder ein flex:1 und dann in imgmax-width:100% gesetzt

.pdf-link-list { 
 
    list-style: none; 
 
    padding: 1em 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.pdf-link-list .column { 
 
    width: 50%; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 
.pdf-link-list .link { 
 
    display: flex; 
 
    text-decoration: none; 
 
    align-items: center; 
 
    width: 100%; 
 
} 
 
.pdf-link-list .image-holder { 
 
    margin-right: 15px; 
 
    width: 35%; 
 
    min-width: 100px; 
 
    max-width: 250px; 
 
    flex: 1 
 
} 
 
.pdf-link-list .width100 { 
 
    max-width: 100% 
 
} 
 
.pdf-link-list .text-holder { 
 
    flex: 1 
 
}

<ul id="laying-patterns-links" class="pdf-link-list"> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

Verwenden Sie min-width zusätzlich zu width für Ihre .image-holder Klasse. Auf diese Weise werden diese Elemente wirklich mindestens breit sein.

Answer 3

Set flex-shrink auf Null auf den .image-holder. Dies verhindert, dass sich die Größe des Bildes in der Flex-Box ändert.

flex-shrink: 0; 

Standardmäßig ist der Wert auf 1 gesetzt, die image-holder Zulassen auf, um die Größe und den flex einzustellen.