Html 如何使div边框灵活但具有最小高度？

堆栈溢出

我希望在divs边框中，信息窗格和表格具有最小高度，并且在表格内容超出边框时具有弹性高度

例如： 注意：StackOverflow不允许我发布图片，因为我是开发人员世界的新手。请使用提供的链接。多谢各位

Html代码：

<div class="searchAndTablesContainer">
<!--    Left panel-->
  <div class="searchPanel">
        Informational pane
      <input class="button1 button2" type="submit" value="Get All Users" onclick="getAllUsers()">
      <input class="button1 button2" type="submit" value="Get All Shop Services" onclick="getAllShopServices()">
  </div>
<!--    Right Panel-->
    <div class="tablesPanel">
            <div id="passReset" style="display:block">
                <table class="table table-striped">
                    <tr class="bg-info" style="text-align: center">
                        <th data-column="id" data-order="desc">Request ID &#9660</th>
                        <th data-column="account_email" data-order="desc">Account Email &#9660</th>
                        <th data-column="date_requested" data-order="desc">Date Requested &#9660</th>
                        <th data-column="date_restarted" data-order="desc">Date Restarted &#9660</th>
                    </tr>
                    <tbody id="passResetTable">
                    </tbody>
                </table>
            </div>
        <div id="users" style="display:block">
            <table class="table table-striped">
                <tr class="bg-info" style="text-align: center">
                    <th data-column="id" data-order="desc">User ID &#9660</th>
                    <th data-column="first_name" data-order="desc">First Name &#9660</th>
                    <th data-column="last_name" data-order="desc">Last Name &#9660</th>
                    <th data-column="phone" data-order="desc">Phone&#9660</th>
                    <th data-column="email" data-order="desc">Email &#9660</th>
                    <th data-column="enabled" data-order="desc">Enabled &#9660</th>
                </tr>
                <tbody id="usersTable">
                </tbody>
            </table>
        </div>
        <div id="services" style="display:block">
            <table class="table table-striped">
                <tr class="bg-info" style="text-align: center">
                    <th data-column="id" data-order="desc">Shop Service ID &#9660</th>
                    <th data-column="first_name" data-order="desc">Service Name &#9660</th>
                    <th data-column="last_name" data-order="desc">Service Price &#9660</th>
                </tr>
                <tbody id="shopServicesTable">
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>

---

我将非常感谢任何在这方面帮助我的人。提前谢谢你

您可以通过容器的

显示：flex

实现这一点（当然还有

最小高度

）。因此，您也可以摆脱“浮动”：

.searchAndTablesContainer{
显示器：flex；
弯曲方向：行；
宽度：100%；
最小高度：100px；
保证金：5px；
}
.搜索小组{
宽度：30%；
背景色：白色；
边界塌陷：塌陷；
外形：1px纯黑；
}
.表面板{
宽度：68%；
背景色：白色；
边界塌陷：塌陷；
外形：1px纯黑；
}

信息窗格
请求ID▼
帐户电子邮件▼
请求日期▼
重新启动日期▼
试验

试验

试验

试验

试验

用户ID▼
名字▼
姓氏▼
电话▼
电子邮件▼
已启用▼
商店服务ID▼
服务名称▼
服务价格▼

Add min height to the css element you want a minimum height of the css element of the minim height of the minim height of？当我添加flex:atuo时，它也不起作用。非常感谢，我只是不知道样式的组合。我把高度放在分格上等等。谢谢。如果这回答了你的问题，那么你应该把它标记为已接受…似乎还不能做到这一点。还有投票。一旦我有能力，我会的。也许这对你有帮助

.searchAndTablesContainer {
    width: 100%;
    height: 500px;
    margin: 5px;
}

.searchPanel {
    width: 30%;
    height: 100%;
    float: left;
    flex: auto;
    background-color: white;
    border-collapse: collapse;
    outline:1px solid black;
}

.tablesPanel {
    width: 68%;
    height: 100%;
    flex: auto;
    float: left;
    background-color: white;
    border-collapse: collapse;
    outline:1px solid black;
}