是否可以使用高度固定但宽度可变的元素列流网格？
Is it possible to have a column-flow grid of elements with fixed height, but variable width?
我目前正在一个网站上工作，我有一个水平对齐的、可滚动的卡片网格。这是一个代码：
.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>
每张卡片都包含文本，生产中的文本长度可变。
我希望卡片的设置高度为 280 像素，最小宽度为 350 像素，如果文本填满卡片中可用的 space，则能够水平扩展。
这可能吗？我现在尝试了几种不同的方法，但一无所获。目前正在使用网格，但很乐意使用 flexbox，如果可以的话。
默认情况下，html 中的内容会垂直增长，因为 block flow direction 是从上到下的。我们可以使用 writing-mode: vertical-lr; 更改行为，但显示的文本将是垂直线。
如果我们创建相似的文本 div 并使其垂直流动，那么父 div 将增长到最佳宽度，而我们的主文本将不会有该宽度的滚动条。
这是我奇怪的解决方案：
.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>
缺点ide 是您必须在页面上再保留一份隐藏的消息副本。
如果您使用 javascript，您可以进行计算并直接在 'card-content' 元素上设置宽度。这是关于如何计算文本宽度 Calculate text width with JavaScript 的讨论。获得值后，您可以 divide 按行数设置宽度。
我目前正在一个网站上工作，我有一个水平对齐的、可滚动的卡片网格。这是一个代码：
.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>
每张卡片都包含文本，生产中的文本长度可变。
我希望卡片的设置高度为 280 像素，最小宽度为 350 像素，如果文本填满卡片中可用的 space，则能够水平扩展。
这可能吗？我现在尝试了几种不同的方法，但一无所获。目前正在使用网格，但很乐意使用 flexbox，如果可以的话。
默认情况下，html 中的内容会垂直增长，因为 block flow direction 是从上到下的。我们可以使用 writing-mode: vertical-lr; 更改行为，但显示的文本将是垂直线。
如果我们创建相似的文本 div 并使其垂直流动，那么父 div 将增长到最佳宽度，而我们的主文本将不会有该宽度的滚动条。
这是我奇怪的解决方案：
.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>
缺点ide 是您必须在页面上再保留一份隐藏的消息副本。
如果您使用 javascript，您可以进行计算并直接在 'card-content' 元素上设置宽度。这是关于如何计算文本宽度 Calculate text width with JavaScript 的讨论。获得值后，您可以 divide 按行数设置宽度。