Остановить гибкий ребенок от полной ширины

Question

Я создал ряд предметов и сравнил их высоты с помощью flex. Однако это приводит к тому, что моя ссылка внутри элементов становится полной, когда я просто хочу, чтобы она была автоматической шириной. Я пробовал установить его на display: inline-block, но это не исправило его.

Вот скрипка: https://jsfiddle.net/v0o2z9g3/2/

.row { 
 
    display: flex; 
 
    flex-direction: row; } 
 

 
    .col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 0 0 15px 0; 
 
    margin: 0 19px 65px; 
 
    width: calc((100%/3) - 38px); 
 
    background: red; } 
 
    .col .resource-item__title { 
 
     font-weight: bolder; } 
 
     .col .resource-item__summary { 
 
     margin: 0 0 5px 0; } 
 
     .col .resource-item__link { 
 
      display: inline-block; 
 
      background: yellow; 
 
      margin-top: auto; } 
 
      .col .resource-item__icon { 
 
      display: inline-block; 
 
      vertical-align: middle; 
 
      margin-right: 5px; 
 
      color: green; 
 
      font-size: 22px; 
 
      cursor: default; } 
 
      .col .resource-item__icon.disabledIcon { 
 
       color: red; }

<div class="row"> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
</div>

Я в основном требую желтого блока до конца, где текст заканчивается, а не протягивать к контейнерным краям.

Благодаря

Answer 1

Вы можете просто установить align-self:flex-start к классу .resource-item__link. В этом решении гиперссылки (<a>) находятся на одном уровне, а не непосредственно после содержимого каждого столбца (.col).

Кодекс (https://jsfiddle.net/v0o2z9g3/4/):

.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 0 0 15px 0; 
 
    margin: 0 19px 65px; 
 
    width: calc((100%/3) - 38px); 
 
    background: red; 
 
} 
 
.col .resource-item__title { 
 
    font-weight: bolder; 
 
} 
 
.col .resource-item__summary { 
 
    margin: 0 0 5px 0; 
 
} 
 
.col .resource-item__link { 
 
    align-self:flex-start; 
 
    background: yellow; 
 
    margin-top: auto; 
 
} 
 
.col .resource-item__icon { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
    color: green; 
 
    font-size: 22px; 
 
    cursor: default; 
 
} 
 
.col .resource-item__icon.disabledIcon { 
 
    color: red; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
</div>

Answer 2

Удалить display:flex;flex-direction:column; из .col. Чтобы сделать их равными высотами, вам нужно только .row быть display:flex;.

Вот upadated fiddle

.row { 
 
    display: flex; 
 
    flex-direction: row; } 
 

 
    .col { 
 
    padding: 0 0 15px 0; 
 
    margin: 0 19px 65px; 
 
    width: calc((100%/3) - 38px); 
 
    background: red; } 
 
    .col .resource-item__title { 
 
     font-weight: bolder; } 
 
     .col .resource-item__summary { 
 
     margin: 0 0 5px 0; } 
 
     .col .resource-item__link { 
 
      display: inline-block; 
 
      background: yellow; 
 
      margin-top: auto; } 
 
      .col .resource-item__icon { 
 
      display: inline-block; 
 
      vertical-align: middle; 
 
      margin-right: 5px; 
 
      color: green; 
 
      font-size: 22px; 
 
      cursor: default; } 
 
      .col .resource-item__icon.disabledIcon { 
 
       color: red; }

<div class="row"> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
    <div class="col"> 
 
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4> 
 
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p> 
 
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a> 
 
    </div> 
 
</div>