Kevin Powell - Community•7mo ago

Positioning last div at end, when using flex and flex-wrap

Hi! See screenshot for reference. I'm banging my head against this one. I have a flex container with flex-wrap enabled. I want the last button (class "close-button") to show at the bottom right corner of the flex-container. The number of buttons in the container can be anything. I also want the container height to only be the needed height. So if there are only 3 room buttons, it should only be high enough to show the three buttons plus the close buttons. I can't get this to work without setting the container to a fixed height. Any input is appreciated. Thanks in advance. PS. This is my first post, so please let me know if this should be structured in better way

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

Simplified fiddle: https://shorturl.at/buyA3

6 Replies

EIO•7mo ago

Wow! This was quite a thinker! 😂 First, here's the code to fix it:

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100svh; /* Force the height to always be maximum */
  max-height: calc(100vh - 16rem); /* Final height will still be controlled by max-height */
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid gray;
}
.close-button {
  margin-top: auto;
  /* You do not need the `align-self` property */
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100svh; /* Force the height to always be maximum */
  max-height: calc(100vh - 16rem); /* Final height will still be controlled by max-height */
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid gray;
}
.close-button {
  margin-top: auto;
  /* You do not need the `align-self` property */
}

I want to try and give an explanation, but only if you actually need it

Niklas WestmanOP•7mo ago

Thanks @EIO! But then we will always be at max height, so if we only have 3 buttons, the height would still be max-height.

EIO•7mo ago

That's where the max height you set comes into play. And that's how the height of the div is controlled.

Niklas WestmanOP•7mo ago

The problem is I want it to be responsive based on the content. That's why I'm using max-height. As it is now I could just omit max-height and set height to calc(100vh - 16rem)

EIO•7mo ago

Oh, I see your point. But even with a single column, you would still need a fixed height to get the space between the regular buttons and the close button

Niklas WestmanOP•7mo ago

I think I was a little vague in my initial description. I only want the space between when it is "needed". When there is only one column, no space will be needed.

Gaming

Programming

Positioning last div at end, when using flex and flex-wrap