Flex box aligment, попробуйте объединить «растяжение» на родителя и «центр» на одного ребенка

Question

У меня есть код ниже и следующие проблемы:

1. Мне нужно, чтобы все дети .lt достигли наибольшего роста (см. Красную рамку на пихтах .lt}. Для этого я использую align-items: stretch;

2. Мне нужно, чтобы содержимое элемента .left было центром v / h. Поэтому я использую align-self:center;, но это отменяет растяжение. (красная граница уменьшена)

3. Мне нужно, чтобы элементы .right были выровнены по левому и верхнему краям.

.container { 
display: flex;
flex-direction:column;
}

.lt{
align-items: stretch;
border: 1px solid #e3e3e3;
display: flex;
margin-bottom: 1.5rem;
}

.left { 
border-right: 1px solid red;
flex: 0 0 90px;
padding: 8px;
align-self:center;
justify-content: center;
}

.right { 
justify-self: flex-start;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75"/>
        abcd
      </a>
    </div>
    <div class="right">
dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
       the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>  



    <div class="lt">
      <div class="left">
        <a href="">
          <img src="https://via.placeholder.com/75"/>
          abcd
        </a>
      </div>
      <div class="right">
        dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
    </div>
</div>    

Answer 1

Вы можете использовать простой градиент, чтобы заменить границу, так как вы знаете ширину изображения, поэтому вы можете разместить его правильно:

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
  background:
    linear-gradient(red,red) 105px 0/1px 100% no-repeat;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  align-self: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>

Или просто используйте вложенный контейнер flexbox.Держите первый растянутый и центрируйте содержимое внутри него:

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  border-right:1px solid red;
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>