フレックスチャイルドが全幅にならないようにする

Question

私はアイテムの行を作成し、フレックスを使用して高さを一致させました。しかし、これはアイテム内の私のリンクがフル幅になるようにしています。私はそれを自動幅にしたいだけです。私は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

fiddleをupadatedています。このソリューションでは、ハイパーリンク（<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

.colからdisplay:flex;flex-direction:column;を削除します。それらを同じ高さにするには、.rowがdisplay:flex;である必要があります。ここで

は

あなたは単にクラス.resource-item__linkからalign-self:flex-start設定することができます

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