Search code examples
htmlcssflexboxtailwind-css

HTML, CSS Flex col: One element content is bigger than others in a row

I'm just wondering, how can I prevent these situations when the title is larger and then it forces content to loose their bottom padding. I'm using tailwind so the classes represent what my content styles are:

grid-item styles: flex flex-col gap-4 
content styles inside grid-item: flex flex-col gap-4 px-5 pb-6

Maybe I need to set a min-height for grid? or should I play with flex?

[![enter image description here]

Solution

  • Try the below code snippet:

    .row{
  display:flex;
  gap: 10px;
  padding:10px 0;
  background: #efefef;
}

.row .col{
  background:#fff;
}

.row .col h4{
  text-overflow:ellipsis;
  overflow: hidden;
  max-width:120px; /* Specify width of heading, after that width everything would be hidden */
  white-space:nowrap;
}

    <div class="row">
  <div class="col">
    <h4>Heading 2</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
  <div class="col">
    <h4>Heading 2 is of column two is bigger than others</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
  <div class="col">
    <h4>Heading 2</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
</div>

    By using text-overflow: ellipsis in css we can prevent the different box height. In which every heading would be shown in single line. if anything exceed the heading width it will be hidden and ... will placed after it.

    I hope this will resolved your issue.