Размер div для ребенка такой же, как и для самого большого div - PullRequest
Новая
       22

Размер div для ребенка такой же, как и для самого большого div

0 голосов
/ 15 января 2019

У меня есть div container, а в container у меня есть div с именем child. Размер child зависит от текста внутри. Но они должны быть точно такой же высоты, но высота самая большая child. Высота child не может быть определена.

Пример: Если самый большой child имеет высоту 600 пикселей из-за текста, все child имеют высоту до 600 пикселей.

Я пытаюсь что-то подобное, но 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, чтобы сделать это?

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Что-то вроде этого? Ваша проблема заключалась в том, что слова не ломались, поэтому добавили word-break и align-items: stretch;, чтобы сделать коробки одинаковой высоты.

вот отличный пост о флексе, он расскажет вам все плюсы о флексе :) https://css -tricks.com / сниппеты / CSS / а-руководство к 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>
0 голосов
/ 15 января 2019

Не ясно, намеренно ли у вас в коде длинная строка неразрывного текста, но я буду предполагать, что вы просто случайно набрали строку в качестве подтверждения концепции. Помните, что по умолчанию дочерние элементы 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>

Если ваши гибкие дети могут содержать очень длинные неразрывные слова, я бы предложил применить необходимый CSS поверх этого . Смотрите пример ниже: 

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