Childs div大小与最大的div css相同答案

【问题标题】：Childs div size is the same of the biggest div cssChilds div大小与最大的div css相同
【发布时间】：2019-06-09 15:39:46
【问题描述】：

我有一个 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 中是否有技巧可以做到这一点？

【问题讨论】：

默认情况下，Flex 项目都具有相同的高度 - jsfiddle.net/f7heb2vy - 所以不清楚你的实际问题是什么？
如果你使用 align-items: flex-start，你可以调整孩子的高度。看到这篇文章 - stackoverflow.com/questions/33034660/…

标签： html css sass responsive-design

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：