html - 柔韧性不取宽

我有以下响应的flex布局，但是.image-holder不会采用正确的宽度-它似乎只是根据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>

有人知道我遗漏了什么吗，我想因为我给出了.image-holderawidth和.text-holderaflex-grow:1，所以当文本保持器展开时，.image holder应该保持不变。
我是刚接触flex的，所以想了解它为什么会以现在的方式运行
编辑
抱歉，上面图像保持器的固定宽度只是为了演示，因为实际值在片段中没有很好地显示问题。图像保持器宽度的实际值为：

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

如果所有图像都是相同的大小，为什么不是所有的图像保持器都是35%宽？

最佳答案

给你的.image-holderaflex:1然后在img集合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>

关于html - 柔韧性不取宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39349592/