How to expand text without shifting surrounding elements using flexbox

user_15508964 0
Viewed 80

I'm trying to create a layout so that when I click on "See More" to expand the text of one container, the surrounding containers remain in the same position.

There are three containers and each container has two wrappers, a top which contains the title and bottom which contains the image, text and button. I don't know what the length of the titles will be beforehand, so in order to make sure that the boxes, text and button line up, I've given each container justify-content: space-between so that the bottom wrappers always align.

The issue arises after clicking "See More", where the bottom wrapper of each container moves down to fit the height of the container.

     .main-container {
          display: flex;
          flex-direction: row;
        }
        .container {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .top-wrapper {
          display: flex;
          flex-direction: column;
          height: 100%;
        } 
        .bottom-wrapper {
          display: flex; 
          flex-direction: column; 
          justify-content: space-between;
        } 
    <div class="main-container">
      <div class="container">
          <div class="top-wrapper">
              <div class="title">
                    TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
              </div>
          </div>
          <div class="bottom-wrapper">
              <div class="image-text-wrapper">
                  <div class="image-container">
                      <img class="image" src="https://dummyimage.com/200x200/000/000">
                  </div>
                  <div class=“text” id="text">
                   {{ text }}
                   //See More code
                  </div>
              </div>
              <button>
                BUTTON 1
              </button>
          </div>
      </div>
      <div class="container">
         //second container code
      <div>
      <div class="container">
         //third container code
      <div>
    </div>

Should I be using a table or is there a simple CSS fix to this?

You can find the full code here: Plunkr

flexbox css html
1 Answers

Try adding the following to your .container class:

.container {
  align-self: flex-start;
}

The align-self property allows you to override the setting for align-items that is controlling your flex items' alignment.

And adding the following to the .title class:

.title {
  min-height: 50px
}

You may need to play around with this setting, but it prevents the image from rendering without any space between it and your title.

Caveat: the CSS you included here in your post isn't exactly what I got when I opened your Plunkr link -- the .container didn't have display: grid; set, but I think this should work nonetheless.

user_56735010
Related