0

I'm looking for flexbox in a grid cell which:

  • flows in the column direction
  • uses a minimum height before wrapping
  • grows in height if all width is filled while wrapping

It's a bit hard to explain in words, hopefully an example should make things clearer. In the example below, I'd like content, to always be a minimum of 100px tall. However, content should not be taller than this unless it has first filled all of the horizontal space in the grid cell.

Is this possible to do somehow?

.grid {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: auto min-content;
  grid-template-areas: "header header" "content sidebar";
}

header {
  grid-area: header;
  background: red;
}

.content {
  grid-area: content;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}

.content-block {
  border: 2px solid green;
  height: 100px;
  width: 50px;
}

.sidebar {
  grid-area: sidebar;
  background: blue;
}
<div class="grid">
  <header>title</header>
  <div class="content">
    <div style="height: 50px" class="content-block"></div>
    <div style="height: 75px" class="content-block"></div>
    <div style="height: 110px" class="content-block"></div>
    <div style="height: 80px" class="content-block"></div>
    <div style="height: 40px" class="content-block"></div>
    <div style="height: 40px" class="content-block"></div>
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>
JKillian
  • 18,061
  • 8
  • 41
  • 74
  • min height won't do the job, the container will grow over the min-height and wrapping to another column will never happen. If you set a max-height or an height, you might have an horizontal scrollbar if the grid doesn't grow. – G-Cyrillus Feb 28 '19 at 21:54
  • in you want to fill the width, then why the column direction? keep it row and you will have what you want, no? – Temani Afif Feb 28 '19 at 21:57
  • @TemaniAfif: Good question, for two reasons: first, the content that comes in is meant to be displayed in columns, starting at the left and moving right. Second, if the direction was `row`, there'd be awkward gaps between rows – JKillian Feb 28 '19 at 22:05
  • as I expected, you are looking for mansory layout ... then this is what you need : https://stackoverflow.com/q/44377343/8620333 – Temani Afif Feb 28 '19 at 22:09
  • Mmm yes, you're exactly right @TemaniAfif, just tried it and it works great. If you want to post an answer to that extent, I'll be happy to accept it. – JKillian Feb 28 '19 at 22:19
  • 1
    I will close as duplicate then, I don't think I can add more than what is already there – Temani Afif Feb 28 '19 at 22:24

0 Answers0