Question 288234 in Html Question posted in
Some basic documentation can be found here.

Html – Justify space between vertically to fill all available space

I am trying to do a component that has 4 fields, two on the right and two on the left, I have them spaced horizontally but I have not been able to do the same vertically.

Here’s the code:


<div class="flex min-h-[5em] bg-blue-500 justify-between">
    <div class="flex flex-col h-full justify-between w-full">
        <span> Title </span>
        <span>Person</span>
    </div>
    <div class="flex flex-col h-full justify-between">
        <span>100</span>
        <span> 12/20 </span>
    </div>
</div>

I just want to fill the space vertical space between the span elements.

Thanks

Edit

It seems to be imposible to achieve this the way I want, but it doesn’t have to be using divs like I am here.

I want to have each of the 4 fields on each corner of the container, the reason I dont do it with position absolute is because I want them to have colition with each other so they don’t overlap. It can probably be achieved using a grid or something like that, if anyone has any ideas I’m all ears.

Tags:

4

Answers


  1. 0

    I was just looking at your code and noticed that there was a small typo in the span tag.

    You should use the class mb-2, which adds a margin to the left.

    Try this:

    <div class="flex min-h-[5em] bg-blue-500 justify-between">
    <div class="flex flex-col h-full justify-between w-full">
        <span class="mb-2"> Title </span>
        <span class="mb-2"> Person </span>
    </div>
    <div class="flex flex-col h-full justify-between">
        <span class="mb-2"> 100 </span>
        <span class="mb-2"> 12/20 </span>
    </div>
</div>

    Since you do not want to do it manually, use flex-grow:

    <div class="flex min-h-[5em] bg-blue-500 justify-between">
    <div class="flex flex-col h-full justify-between flex-grow">
        <span> Title </span>
        <span> Person </span>
    </div>
    <div class="flex flex-col h-full justify-between flex-grow">
        <span> 100 </span>
        <span> 12/20 </span>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You have given a min-h, but for justify-between it is unable to get a default height

    Give a default height value (h-full in this case)

    div class="… min-h-[5em] h-full … justify-between.."

      <div class="flex min-h-[5em] h-full bg-blue-500 justify-between flex-row">
    <div class="flex flex-col justify-between">
      <span> Title </span>
      <span>Person</span>
    </div>
    <div class="flex flex-col justify-between  ">
      <span>100</span>
      <span> 12/20 </span>
    </div>
  </div>

    Hope this makes some sense.

    Login or Signup to reply.
  3. 0

    set the height to full as well

       <div class="flex min-h-[5em] h-full bg-blue-500 justify-between">
        <div class="flex flex-col justify-between">
          <span> Title </span>
          <span>Person</span>
        </div>
        <div class="flex flex-col justify-between">
          <span>100</span>
          <span> 12/20 </span>
        </div>
      </div>
    Login or Signup to reply.
  4. 0

    Add min-height: inherit; to component give the same height as the parent div

    Hopefully, this will work

    <style>
.component {
  min-height: inherit;
}
</style>
<div class="flex min-h-[5em] bg-blue-500 justify-between">
  <div class="flex component flex-col h-full justify-between w-full">
    <span> Title </span>
    <span>Person</span>
  </div>
  <div class="flex component flex-col h-full justify-between">
    <span>100</span>
    <span> 12/20 </span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search