Question

我有一个div container，在container中，我有一个名为child的div。 child的大小取决于其中的文本。但它们的高度必须完全相同，但必须是最大child的高度。 child的高度无法定义。

示例：如果由于文本原因，最大的child的高度为600px，则所有child的高度为600px。

我尝试了类似的操作，但是min-height无法正常工作：/

.container {
  display: flex;
  margin: 10px;
  padding: 4vh;
  min-height: 500px;
  width: 500px;
}

.child {
  margin: 10px;
  background-color: red;
  height: 100%;
}

<div class='container'>
  <div class='child'>ezjfzlkejflze</div>
  <div class='child'>ezfazdzadadzadazdazdazdazfezfljrlkjfeklrgkrejhgkjerhgjerhgjrehgkjerhgkejrhgkejrgre</div>
  <div class='child'>azdazdazdazjgdjzehgez</div>
  <div class='child'>ezfozeklfjezfze</div>
</div>

我在JS中看到了一些东西，但这不是我想要的。 CSS有技巧吗？

Answer 1

尚不清楚您是否有意在代码中包含一长串不可破坏的文本，但我将假设您只是随机输入了一个字符串作为概念验证。请记住，默认情况下，flex子级将不会拉伸以填充父级（flex默认为0 1 auto，这意味着flex-grow: 0）。您将需要使用flex-grow: 1，或至少使用flex: 1 1 auto：

.container {
  display: flex;
  margin: 10px;
  padding: 4vh;
  width: 500px;
  flex: 1 1 auto;
}

.child {
  margin: 10px;
  background-color: red;
}

<div class='container'>
  <div class='child'>Lorem ipsum dolor sit amet.</div>
  <div class='child'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper nulla nec semper imperdiet. Nulla tincidunt fermentum metus, quis gravida nulla sagittis sit amet. In eros ipsum, consectetur sit amet commodo nec, ullamcorper id est. Nullam sagittis sodales elit, dictum auctor turpis sagittis sed. Integer convallis eu ante quis iaculis. Aenean tincidunt rutrum quam non venenatis. Maecenas aliquet tellus sed aliquet egestas.</div>
  <div class='child'>Lorem ipsum dolor sit amet.</div>
  <div class='child'>Lorem ipsum dolor sit amet.</div>
</div>

如果您的flex子代可能包含非常长的牢不可破的单词，我建议您使用necessary CSS on top of that。请参见下面的示例：

.container {
  display: flex;
  margin: 10px;
  padding: 4vh;
  width: 500px;
  flex: 1 1 auto;
}

.child {
  margin: 10px;
  background-color: red;
  
  /* Adapted from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

<div class='container'>
  <div class='child'>ezjfzlkejflze</div>
  <div class='child'>ezfazdzadadzadazdazdazdazfezfljrlkjfeklrgkrejhgkjerhgjerhgjrehgkjerhgkejrhgkejrgre</div>
  <div class='child'>azdazdazdazjgdjzehgez</div>
  <div class='child'>ezfozeklfjezfze</div>
</div>

Answer 2

有什么联系吗？您的问题是，这些单词不会中断，因此添加了word-break和align-items: stretch;以使这些框的高度相同。

这是有关flex的精彩文章，它将告诉您有关flex的所有优点：） https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  align-items: stretch;
  margin: 10px;
  padding: 4vh;
  width: 500px;
}

.child {
  margin: 10px;
  background-color: red;
  max-width: 150px;
  word-break: break-all;
  padding: 15px;
}

<div class='container'>
  <div class='child'><p>ezjfzlkejflze</p></div>
  <div class='child'><p>ezfazdzadadzadazdazdazdazfezfljrlkjfeklrgkrejhgkjerhgjerhgjrehgkjerhgkejrhgkejrgre</p></div>
  <div class='child'><p>azdazdazdazjgdjzehgez</p></div>
  <div class='child'><p>ezfozeklfjezfze</p></div>
</div>

子级div大小与最大div CSS相同

2 个答案: