Pete Pete - 2 months ago 21
CSS Question

Flex not taking width

I have the following responsive flex layout but the

.image-holder
won't take the correct width - it just seems to be resized according to how much text is in the
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>





Does anyone know what I am missing from this, I thought because I gave the
.image-holder
a
width
and the
.text-holder
a
flex-grow:1
, the
.image holder
should stay the same whilst the text holder expands.

I'm new to flex so would like to understand why it is behaving in the way it is

EDIT

Sorry the fixed width for the image-holder above is just for demonstration as the real values didn't show the problem well on the snippet. The real values for image-holder width is:

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


Why aren't all the image-holders 35% wide if all the images inside them are the same size?

Answer

give your .image-holder a flex:1 and then in img set max-width:100%

.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>

Comments