Is it possible to have a column-flow grid of elements with fixed height, but variable width?

Question

I'm working on a website at the moment where I have a horizontally aligned, scrollable grid of cards. Here is a code:

.testimonial-card {
  min-width: 350px;
  height: 280px;
  flex-basis: auto;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="overflow-y-scroll gap-10 pb-4 flex flex-row justify-start">
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
    <div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
      <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
</div>

Each card contains text, which in production will be of variable length.

I'd like the cards to have a set height of 280px, and a min-width of 350px, with the ability to expand horizontally if the text fills the space available in the card.

Is that possible? I've tried a few different approaches now but am getting nowhere. Currently using grid but happy to use flexbox if it can be done with that.

so you don't want scroll bar on cards and you want them to expand instead, right? — the Hutt, Nov 22 '21 at 12:29
Maybe you could change your example to have texts of different length for different cards? — lukas.j, Nov 22 '21 at 12:31
@onkar ruikar - that's correct. I want them to expand (horizontally, as opposed to vertically — David Fox, Nov 22 '21 at 12:52

score 1 · Accepted Answer · answered Nov 22 '21 at 14:41

By default things grow vertically in html because block flow direction is top-to-bottom. We can change the behavior using writing-mode: vertical-lr;, but the displayed text will be vertical lines.
If we create similar text div and make it flow vertically then parent div will grow to optimum width and our main text won't have scroll bars with that width.
Here is my weird solution:

.testimonial-card {
  height: 280px;
  flex-basis: auto;
}

.card-content {
  min-width: 350px;  /*shifed min-width here*/
  height: 7em;
  position: relative;
}


/* using this to stretch parent enough to not have scroll */
.helper {
  visibility: hidden;
  background-color: thistle;
  writing-mode: vertical-lr;
  overflow-wrap: break-word;
  line-height: 1.3rem;
  height: 7rem;  /*limiting to 5 lines*/
}

.message {
  /*background-color: wheat;*/
  border: 1px solid green;
  width: 100%;
  position: absolute;
  top: 0px;
  line-height: 1.3rem;
  height: 8rem;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="overflow-y-scroll gap-10 pb-4 flex flex-row justify-start">
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <div class="card-content grid grid-flow-row  items-stretch h-full gap-4">
      <div class="helper">
        1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam evenietamet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet.
      </div>
      <div class="message">
        1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam evenietamet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet.
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <div class="card-content grid grid-flow-row  items-stretch h-full gap-4">
      <div class="helper">
        2 Lorem ipsum dolor sit, amet
      </div>
      <div class="message">
        2 Lorem ipsum dolor sit, amet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <div class="card-content grid grid-flow-row  items-stretch h-full gap-4">
      <div class="helper">
        3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam
        eveniet 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum
        voluptatum veniam eveniet
      </div>
      <div class="message">
        3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam
        eveniet 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum
        voluptatum veniam eveniet
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <div class="card-content grid grid-flow-row  items-stretch h-full gap-4">
      <div class="helper">
        4 Hi!
      </div>
      <div class="message">
        4 Hi!
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <div class="card-content grid grid-flow-row  items-stretch h-full gap-4">
      <div class="helper">
        5. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      </div>
      <div class="message">
        5. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
</div>

The downside is that you'll have to keep one more hidden copy of message on the page.

If you use javascript uou can do calculations and directly set width on 'card-content' elements. Here is a discussion about how to calculate text width Calculate text width with JavaScript . Once you get the value you divide it by number of rows to get width to set.

That's a great solution, thanks so much for sharing! – David Fox Nov 22 '21 at 16:05 — David Fox, Nov 22 '21 at 16:05

Is it possible to have a column-flow grid of elements with fixed height, but variable width?

1 Answers1

Linked