CODEWITHSUNDEEP
htmlcsssassresponsive-design
Monsieur Sam
Monsieur Sam

Reputation: 333

Childs div size is the same of the biggest div css

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 ?

Upvotes: 0

Views: 59

Answers (2)

Flubssen
Flubssen

Reputation: 65

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>

Upvotes: 0

Terry
Terry

Reputation: 66133

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>

Upvotes: 3

Related Questions