0

I have the code below and the following issues:

  1. I need that all the children of .lt to get the biggest height.(see red border on firs .lt}. for that I use align-items: stretch;

  2. I need the content of the element .left to be v/h center. So I use align-self:center; but this cancel the stretch. (the red border is reduced)

  3. I need the .right elements to be aligned left and top.

.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>
user3541631
  • 3,686
  • 8
  • 48
  • 115
  • You're centering the flex items, but not their content, which is breaking your layout. See this post to understand the "structure and scope" of flex (and grid) layout, and how centering works within them: https://stackoverflow.com/q/45536537/3597276 – Michael Benjamin Jan 24 '19 at 17:40

1 Answers1

1

You can use a simple gradient to replace the border since you know the width of the image thus you can place it correctly:

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

Or simply use nested flexbox container. Keep the first one stretched and center content inside it:

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415