Flex Item расширяется за пределы своего родительского контейнера Flex

Question

У меня этот гибкий элемент расширяет свою высоту за пределы своего гибкого контейнера, если размер шрифта больше.

.jobTitleDescCont {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    border: yellowgreen solid 5px;
}

.jobTitleDescCont .jobTitle {
    font-size: 1em;
    height: 30%;
    border: blue 5px solid;
}

.jobTitleDescCont .jobDesc {
    font-size: 2em;
    height: 70%;
    border: green 5px solid;
    
    overflow: auto;
}

<div class="jobTitleDescCont">
    <div class="jobTitle">
        {{job.title}}
    </div>
    <div class="jobDesc">
        {{job.description}}
    </div>
</div>

Здесь .jobTitleDescCont .jobDesc font-size: 1em;, и он работает нормально, переполнение будет работать, как ожидалось, без увеличения его высоты, это все еще в пределах его контейнер.

But when you .jobTitleDescCont .jobDesc font-size: 2em;, the flex container also increases and as a result, the flex item too.

введите описание изображения здесь

Обратите внимание, здесь, в правом нижнем углу, зеленый и желто-зеленый граница расширяющегося гибкого элемента и гибкого контейнера увеличивается. Конечно, полоса прокрутки может go и больше, и если текст достаточно длинный, вы можете прокручивать за пределы видимой части полосы прокрутки, пока вы больше не увидите полосу прокрутки.

В соответствии с моим пониманием , высота гибкого контейнера должна оставаться на 100% относительно этого контейнера, как и для гибкого элемента. Я также знаю, что гибкие элементы адаптивны, поэтому они могут увеличиваться в зависимости от содержимого, но у меня есть переполнение, чтобы позаботиться о содержимом. text?

Почему увеличивается высота гибкого контейнера и элемента?

У меня есть временное исправление: height: 575px

.jobTitleDescCont {
    display: flex;
    flex-flow: column nowrap;
    height: 575px;
    border: yellowgreen solid 5px;
}

, но это побеждает отзывчивый CSS.

Answer 1

ciao!

Кажется, я понял вашу проблему. В следующем фрагменте мы исправим height на 100vh [100% высоты окна просмотра] вместо 100%

. Таким образом, чистый способ сохранить соотношение 30-70 независимо от шрифта следующее:

JSFiddle

.jobTitleDescCont {
  display: flex;
  height: 100vh;
  flex-flow: column nowrap;
  border: yellowgreen solid 5px;
}

.jobTitle {
  height: 30%;
  font-size: 1em;
  border: blue 5px solid;
}

.jobDesc {
  height: 70%;
  font-size: 3em;
  border: green 5px solid;
  overflow-y: auto;
}

<div class="jobTitleDescCont">
  <div class="jobTitle">ciao</div>
  <div class="jobDesc">ciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div> 
</div>

Когда размер шрифта увеличивается, это увеличивает длину полосы прокрутки второго гибкого элемента, не затрагивая всю длину контейнера, как вы и просили

В вашем конкретном случае c содержимое jobTitle не будет выходить за пределы его 30% высоты, поэтому я не стал добавлять overflow-y: auto, как во втором гибком элементе. Если это не так, его необходимо добавить для соблюдения соотношения 30-70

Если вышеприведенная гипотеза верна, вы также можете избежать большого количества пустого пространства в первом гибком элементе, заменив height элемента container с max-height

Что касается объяснения, посмотрите, пожалуйста, на этот хороший ответ . Здесь вместо этого решение, позволяющее продолжать использовать 100% процент в контейнере с сохранением предполагаемого соотношения, что в нашем случае дает:

JSFiddle

html, 
body {
    height: 100%;
}

.jobTitleDescCont {
  display: flex;
  height: 100%;
  flex-flow: column nowrap;
  border: yellowgreen solid 5px;
}

.jobTitle {
  height: 30%;
  font-size: 1em;
  border: blue 5px solid;
}

.jobDesc {
  height: 70%;
  font-size: 2em;
  border: green 5px solid;
  overflow-y: auto;
}

<div class="jobTitleDescCont">
  <div class="jobTitle">ciao</div>
  <div class="jobDesc">ciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div> 
</div>

Надеюсь, это поможет

Хороших выходных,
Антонино

Answer 2

Я нашел виновного, но до сих пор не понимаю, почему. Как видите, здесь . Если я удалю это, все пойдет хорошо, но даже если я перенесу это в другое, проблема снова существует. Я не понимаю, почему.

.jobTitleDescCont должен учитывать высоту, заданную их гибким контейнером .col1.

Поскольку .ExpandedjobImage - это статический c размер изображения, задание height: 100% на .jobTitleDescCont только приведет к тому, что он займет оставшееся пространство и выделит оставшееся пространство для .jobTitle и .jobDesc, которые они разделяют в соотношении 30-70.

<div class="col1">
    <img class="ExpandedjobImage" :src="'a URL'" />
    <div class="jobTitleDescCont">
        <div class="jobTitle">
            <scale-font-size :text="job.title" />
        </div>
        <div class="jobDesc">
            {{job.description}}
        </div>
    </div>
</div>

.col1 {
    display: flex;
    height: 100%;
    flex-flow: column nowrap;
    width: 30%;
    border: solid green 5px;
}

.ExpandedjobImage {
    object-fit: contain;
}

.jobTitleDescCont {
    display: flex;
    flex-flow: column wrap;
    
    border: yellowgreen solid 5px;
}

.jobTitleDescCont .jobTitle {
    font-size: 3em;
    max-height: 30%;

    padding: 5%;
    border: blue 5px solid;
}

.jobTitleDescCont .jobDesc {
    font-size: 1.5em;
    height: 70%;

    padding: 5%;
    word-break: break-all;
    overflow-y: auto;
    border: green 5px solid;
}

Answer 3

В вашем классе .jobDesc вы должны заменить height: 70% на flex: 1, таким образом он займет оставшееся доступное пространство. И хотя я не могу воспроизвести вашу ошибку, вам следует добавить box-sizing: border-box в контейнер, в вашем случае jobTitleDescCont, это может решить проблему переполнения.