时间戳

首页 > 解决方案 > 使 div 根据父级大小增长和缩小

html - 使 div 根据父级大小增长和缩小

问题描述

我正在尝试创建一个使其大小适应容器大小的小部件。小部件可以展开，以便显示额外的信息。我有三行，我正在寻找的行为是：

我为颜色道歉，但他们应该给出一个更好的主意。这是我目前拥有的：

折叠的小部件

在这种情况下，小部件（白色背景）被折叠并在父容器（红色背景）中居中。当我单击打开时，第一行内容和第二行（仅包含按钮）必须保持相同大小，第三行必须扩展以填充可用空间。这是目前发生的情况：

扩展小部件

小部件（白色背景）正确扩展以填充父级，但扩展行（黑色背景）溢出。我正在寻找的是这个（白色的 bg 应该填满父母，对不起）： 在此处输入图像描述

这是代码（忽略填充和颜色，这样做是为了提供更好的想法，以及@click处理程序）：

<div id="searchWidget">
        <div class="row no-row-padding">
            <div class="col-12" style="background-color: blue;">
                <p style="color: white">First row of content</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr class="solid">
            </div>
        </div>  

        <div class="row no-row-padding">
            <button class="btn btn-outline-primary actionButton" type="button" @click="showAdvancedOptions">Open</button>
        </div>  

        <div class="row" id="advancedOptions" style="background-color: black; margin-left: 10px; margin-right: 10px">
            <div class="col-12" style="background-color: purple">
                <div class="collapse" ref="advancedOptionsCollapse" style="background-color: yellow">
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                    <p>Hello World</p>
                </div>
            </div>
        </div>                        
    </div>

这是CSS：

#searchWidget {
    padding: 16px;
    max-height: 100%;
    width: 100%;

    background-color: white;
    display: flex;
    flex-flow: column;
}

我使用 flex 尝试了所有可能的组合，但我很难找到一种有效的组合。我已尝试设置所有可能的flex组合，但找不到可以扩展和收缩第三行的组合。

我正在使用 Bootstrap 4.0.0 和折叠组件，以及 Vue.js（如果有帮助的话）。

任何帮助是极大的赞赏

标签： htmlcssbootstrap-4flexbox

解决方案

如果你把它放在overflow:hidden父级（searchWidget）上，它应该工作，overflow:auto在第三行..

https://www.codeply.com/p/qyAqKJlMTz

  <div id="searchWidget" class="vh-100 d-flex flex-column overflow-hidden justify-content-center">
        <div class="row no-row-padding">
            <div class="col-12" style="background-color: blue;">
                <p style="color: white">First row of content</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr class="solid">
            </div>
        </div>
        <div class="row no-row-padding">
            <button class="btn btn-outline-primary actionButton" type="button" @click="showAdvancedOptions()">Open</button>
        </div>
        <div class="row overflow-auto" id="advancedOptions" style="background-color: black; margin-left: 10px; margin-right: 10px">
            <div class="col-12" style="background-color: purple">
                <div :class="collapseClasses" ref="advancedOptionsCollapse" style="background-color: yellow">
                    <p>Hello World</p>
                    <p>Hello World</p>
                    ...
                </div>
            </div>
        </div>
  </div>

推荐阅读