0

I have a div container and in container, I have some div called child. The size of child depends to the text inside. But they have to be the exact same height , but the height of the biggest child. The height of child can't be defined.

Exemple : If the biggest child has a height of 600px because of the text, all child have a height to 600px.

I try something like this but min-height is not working :/

.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>

I see something in JS, but that's not what I want. Is there a trick in CSS to do it ?

Monsieur Sam
  • 333
  • 1
  • 6
  • 20
  • Flex items by default all have the same height already - https://jsfiddle.net/f7heb2vy/ - so rather unclear what your actual problem is here? – misorude Jan 15 '19 at 15:37
  • You can adjust the height of children if you use align-items: flex-start. See this post - https://stackoverflow.com/questions/33034660/how-to-disable-equal-height-columns-in-flexbox – elias.hj Jan 15 '19 at 15:37

2 Answers2

3

It is not clear if you intentionally have a long string of non-breakable text in your code, but I will assume that you just randomly typed a string in as a proof-of-concept. Remember that by default the flex children will not stretch to fill out the parent (flex is 0 1 auto by default, which implies flex-grow: 0). You will need to use flex-grow: 1, or at least 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>

If your flex children may contain extremely long unbreakable words, I would suggest applying the necessary CSS on top of that. See example below:

.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>
Terry
  • 63,248
  • 15
  • 96
  • 118
0

Something linke this ? Your problem was, that the words don't break, and so added word-break, and align-items: stretch; to make the boxes same height.

here is a great post about flex, it will tell you all the goodies about 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>
Flubssen
  • 65
  • 9