时间戳

首页 > 解决方案 > Flex Item is expanding beyond its parent Flex container

html - Flex Item is expanding beyond its parent Flex container

问题描述

I have this flex item expanding its height beyond its flex container if font-size is bigger.

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

Here, .jobTitleDescCont .jobDesc font-size: 1em; and it works alright, overflow would work as expected without increasing its height, it's still within its container.

enter image description here

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

enter image description here

Notice here in the lower right corner, the green and the yellowgreen border of the expanding flex item and the flex container is increasing. Of course, the scroll bar can go beyond that too and if the text is long enough, you can scroll beyond the visible part of the scrollbar until you can no longer see the scrollbar.

As per my understanding, the height of the flex container should remain 100% relative to it's container so as the flex item. I also know that flex items are responsive so they can get bigger depending on the content but I have the overflow to take care of the content.

Shouldn't just the overflow scrollbar just get longer as it accomodates bigger font text?

Why is it increasing the height of the flex container and item?

A temporary fix I have is setting height: 575px

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

but this defeats the responsive CSS.

标签： htmlcssflexbox

解决方案

我找到了罪魁祸首，但我仍然不明白为什么。如您所见，这里有一个 <img> 。如果我删除它，一切都会顺利，但即使我将它包装成另一个，问题仍然存在。我不明白为什么。

.jobTitleDescCont应该尊重他们的.col1弹性容器给出的高度。

与.ExpandedjobImage静态图像大小一样，给予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;
}

推荐阅读