CODEWITHSUNDEEP
cssflexbox
Meek
Meek

Reputation: 3348

List items with flexbox - and sometimes a link

I have some list items which contains an image and text aligned side by side. The image part always stays the same width (in px) whereas I would like the box next to it to fill out the rest of the space.

In my example, it works fine. But if I want the list item to become a link

.advanced-list {
  padding-left: 0;
  list-style: none;
}

.advanced-list li {
  display: flex;
  min-height: 80px;
  zoom: 1;
  flex-direction: row;
  background-color: #f5f5f5; 
}

.advanced-list li .list-img {
  display: block;
  height: 235px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  flex: 0 0 235px;
  order: 1;
}

.advanced-list li .list-content {
  padding: 15px;
  line-height: 1.3333333;
  order: 2;
}

.advanced-list li .list-content .list-header {
  margin-top: 0;
  margin-bottom: 5px;
}

.advanced-list li .advanced-link {
  display: flex;
  color: #252525;
  text-decoration: none;
  flex-direction: row;
}

.advanced-list li+li {
  margin-top: 5px;
}
<ul class="advanced-list">
  <li>
    <div class="list-content">
      <h4 class="list-header">List item without link</h4> Lorem ipsum dolor...
    </div>
    <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
  </li>
  <li>
    <a href="#" class="advanced-link">
      <div class="list-content">
        <h4 class="list-header">List item with link inside</h4> Short text - keep width 100%.
      </div>
      <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
    </a>
  </li>
</ul>

by adding a link around it, something goes wrong:

See this fiddle - the second list item has a link - how should the flexbox be applied here so that the text takes up the remaining width?

Upvotes: 1

Views: 1635

Answers (1)

Ozturk Can Gokkaya
Ozturk Can Gokkaya

Reputation: 335

Your .advanced-link anchor element is in a flex container. So it wont have full width.

Set :

.advanced-list li .advanced-link {
    width: 100%;
}

or

.advanced-list li .advanced-link {
  flex: 1
}

Upvotes: 1

Related Questions