无法使 Bootstrap 的弹性框滚动

iszxjhcz 于 9个月前发布在 Bootstrap

关注(0)|答案(4)|浏览(101)

我正在开发一个react应用程序，我试图得到一个可以滚动的框，但没有成功。相反，该框正在扩展到父对象的可用空间之外。
我复制并编辑了呈现的html，以使其更容易阅读。我正在使用bootstrap css。
这是我代码

<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <link rel="icon" href="/icons/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/icons/logo192.png">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Nodex - Requester</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
    <script defer="" src="/static/js/bundle.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .cursor-pointer {
            cursor: pointer;
        }

        .user-select-none {
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .tree-node>.collapse {
            position: relative;
        }

        .tree-node-icon {
            margin-right: 0.5rem;
        }

        .tree-node .tree-node {
            padding-left: 1.5rem;
        }

        .tree-node.active>div:first-child {
            color: #ffc107 !important;
        }

        .tree-node>.collapse.show:before {
            position: absolute;
            display: block;
            width: 1px;
            height: 100%;
            margin-left: 5px;
            content: "";
            background-color: gray;
        }

        .tree-node>div>.tree-node-ctrls {
            display: none;
        }

        .tree-node>div:first-child:hover {
            background-color: #444;
        }

        .tree-node>div:hover>.tree-node-ctrls {
            display: block;
        }

        .tree-node-icon .badge {
            width: 60px;
            text-align: center;
        }

        .titlebar {
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-app-region: drag;
        }

        .nav {
            --bs-nav-link-padding-x: 1rem;
            --bs-nav-link-padding-y: 0.05rem;
        }

        .response-section.maximized {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background: rgba(var(--bs-dark-rgb));
        }

        .response-section.maximized .response-section-title {
            margin-left: 100px;
        }

        .btn-small-height {
            --bs-btn-padding-y: 0.1rem;
            --bs-btn-padding-x: 0.4rem;
            --bs-btn-font-size: 0.75rem;
        }

        .window-ctrls i {
            width: 16px;
            height: 16px;
            font-size: 10px;
            margin-right: -4px;
        }

        /* infotip container */
        .infotip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }

        /* infotip text */
        .infotip .infotiptext {
            visibility: hidden;
            background-color: var(--bs-primary) !important;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;

            /* Position the infotip text - see examples below! */
            position: absolute;
            z-index: 9999;
        }

        /* Show the infotip text when you mouse over the infotip container */
        .infotip:hover .infotiptext {
            visibility: visible;
        }

        .infotip .infotiptext.infotiptext-right {
            top: -5px;
            left: 105%;
        }

        .infotip .infotiptext.infotiptext-left {
            top: -5px;
            right: 105%;
            width: 350px;
        }

        .infotip .infotiptext.infotiptext-top {
            width: 120px;
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
            /* Use half of the width (120/2 = 60), to center the infotip */
        }

        .infotip .infotiptext.infotiptext-bottom {
            width: 120px;
            top: 100%;
            left: 50%;
            margin-left: -60px;
            /* Use half of the width (120/2 = 60), to center the infotip */
        }

        /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jc3MvYXBwLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtDQUNDLGVBQWU7QUFDaEI7O0FBRUE7Q0FDQyxvQ0FBb0M7Q0FDcEMsNEJBQTRCO0FBQzdCOztBQUVBO0NBQ0Msa0JBQWtCO0FBQ25COztBQUVBO0NBQ0Msb0JBQW9CO0FBQ3JCOztBQUVBO0NBQ0Msb0JBQW9CO0FBQ3JCOztBQUVBO0NBQ0MseUJBQXlCO0FBQzFCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGNBQWM7Q0FDZCxVQUFVO0NBQ1YsWUFBWTtDQUNaLGdCQUFnQjtDQUNoQixXQUFXO0NBQ1gsc0JBQXNCO0FBQ3ZCOztBQUVBO0NBQ0MsYUFBYTtBQUNkOztBQUVBO0NBQ0Msc0JBQXNCO0FBQ3ZCOztBQUVBO0NBQ0MsY0FBYztBQUNmOztBQUVBO0NBQ0MsV0FBVztDQUNYLGtCQUFrQjtBQUNuQjs7QUFFQTtDQUNDLG9DQUFvQztDQUNwQyw0QkFBNEI7Q0FDNUIsd0JBQXdCO0FBQ3pCOztBQUVBO0NBQ0MsNkJBQTZCO0NBQzdCLGdDQUFnQztBQUNqQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixTQUFTO0NBQ1QsVUFBVTtDQUNWLFFBQVE7Q0FDUixXQUFXO0NBQ1gsb0NBQW9DO0FBQ3JDOztBQUVBO0NBQ0Msa0JBQWtCO0FBQ25COztBQUVBO0NBQ0MsMEJBQTBCO0NBQzFCLDBCQUEwQjtDQUMxQiwyQkFBMkI7QUFDNUI7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsWUFBWTtDQUNaLGVBQWU7Q0FDZixrQkFBa0I7QUFDbkI7O0FBRUEsc0JBQXNCO0FBQ3RCO0NBQ0Msa0JBQWtCO0NBQ2xCLHFCQUFxQjtDQUNyQiwrQkFBK0IsRUFBRSw4Q0FBOEM7QUFDaEY7O0FBRUEsaUJBQWlCO0FBQ2pCO0NBQ0Msa0JBQWtCO0NBQ2xCLDhDQUE4QztDQUM5QyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUFrQjtDQUNsQixZQUFZOztDQUVaLG9EQUFvRDtDQUNwRCxrQkFBa0I7Q0FDbEIsYUFBYTtBQUNkOztBQUVBLG9FQUFvRTtBQUNwRTtDQUNDLG1CQUFtQjtBQUNwQjs7QUFFQTtDQUNDLFNBQVM7Q0FDVCxVQUFVO0FBQ1g7O0FBRUE7Q0FDQyxTQUFTO0NBQ1QsV0FBVztDQUNYLFlBQVk7QUFDYjs7QUFFQTtDQUNDLFlBQVk7Q0FDWixZQUFZO0NBQ1osU0FBUztDQUNULGtCQUFrQixFQUFFLDhEQUE4RDtBQUNuRjs7QUFFQTtDQUNDLFlBQVk7Q0FDWixTQUFTO0NBQ1QsU0FBUztDQUNULGtCQUFrQixFQUFFLDhEQUE4RDtBQUNuRiIsInNvdXJjZXNDb250ZW50IjpbIi5jdXJzb3ItcG9pbnRlciB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnVzZXItc2VsZWN0LW5vbmUge1xuXHQtd2Via2l0LXVzZXItc2VsZWN0OiBub25lICFpbXBvcnRhbnQ7XG5cdHVzZXItc2VsZWN0OiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi50cmVlLW5vZGUgPiAuY29sbGFwc2Uge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi50cmVlLW5vZGUtaWNvbiB7XG5cdG1hcmdpbi1yaWdodDogMC41cmVtO1xufVxuXG4udHJlZS1ub2RlIC50cmVlLW5vZGUge1xuXHRwYWRkaW5nLWxlZnQ6IDEuNXJlbTtcbn1cblxuLnRyZWUtbm9kZS5hY3RpdmUgPiBkaXY6Zmlyc3QtY2hpbGQge1xuXHRjb2xvcjogI2ZmYzEwNyAhaW1wb3J0YW50O1xufVxuXG4udHJlZS1ub2RlID4gLmNvbGxhcHNlLnNob3c6YmVmb3JlIHtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRkaXNwbGF5OiBibG9jaztcblx0d2lkdGg6IDFweDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRtYXJnaW4tbGVmdDogNXB4O1xuXHRjb250ZW50OiBcIlwiO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiBncmF5O1xufVxuXG4udHJlZS1ub2RlID4gZGl2ID4gLnRyZWUtbm9kZS1jdHJscyB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi50cmVlLW5vZGUgPiBkaXY6Zmlyc3QtY2hpbGQ6aG92ZXIge1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0O1xufVxuXG4udHJlZS1ub2RlID4gZGl2OmhvdmVyID4gLnRyZWUtbm9kZS1jdHJscyB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4udHJlZS1ub2RlLWljb24gLmJhZGdlIHtcblx0d2lkdGg6IDYwcHg7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLnRpdGxlYmFyIHtcblx0LXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZSAhaW1wb3J0YW50O1xuXHR1c2VyLXNlbGVjdDogbm9uZSAhaW1wb3J0YW50O1xuXHQtd2Via2l0LWFwcC1yZWdpb246IGRyYWc7XG59XG5cbi5uYXYge1xuXHQtLWJzLW5hdi1saW5rLXBhZGRpbmcteDogMXJlbTtcblx0LS1icy1uYXYtbGluay1wYWRkaW5nLXk6IDAuMDVyZW07XG59XG5cbi5yZXNwb25zZS1zZWN0aW9uLm1heGltaXplZCB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0bGVmdDogMHB4O1xuXHRyaWdodDogMHB4O1xuXHR0b3A6IDBweDtcblx0Ym90dG9tOiAwcHg7XG5cdGJhY2tncm91bmQ6IHJnYmEodmFyKC0tYnMtZGFyay1yZ2IpKTtcbn1cblxuLnJlc3BvbnNlLXNlY3Rpb24ubWF4aW1pemVkIC5yZXNwb25zZS1zZWN0aW9uLXRpdGxlIHtcblx0bWFyZ2luLWxlZnQ6IDEwMHB4O1xufVxuXG4uYnRuLXNtYWxsLWhlaWdodCB7XG5cdC0tYnMtYnRuLXBhZGRpbmcteTogMC4xcmVtO1xuXHQtLWJzLWJ0bi1wYWRkaW5nLXg6IDAuNHJlbTtcblx0LS1icy1idG4tZm9udC1zaXplOiAwLjc1cmVtO1xufVxuXG4ud2luZG93LWN0cmxzIGkge1xuXHR3aWR0aDogMTZweDtcblx0aGVpZ2h0OiAxNnB4O1xuXHRmb250LXNpemU6IDEwcHg7XG5cdG1hcmdpbi1yaWdodDogLTRweDtcbn1cblxuLyogaW5mb3RpcCBjb250YWluZXIgKi9cbi5pbmZvdGlwIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdGJvcmRlci1ib3R0b206IDFweCBkb3R0ZWQgYmxhY2s7IC8qIElmIHlvdSB3YW50IGRvdHMgdW5kZXIgdGhlIGhvdmVyYWJsZSB0ZXh0ICovXG59XG5cbi8qIGluZm90aXAgdGV4dCAqL1xuLmluZm90aXAgLmluZm90aXB0ZXh0IHtcblx0dmlzaWJpbGl0eTogaGlkZGVuO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1icy1wcmltYXJ5KSAhaW1wb3J0YW50O1xuXHRjb2xvcjogI2ZmZjtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHRib3JkZXItcmFkaXVzOiA2cHg7XG5cdHBhZGRpbmc6IDVweDtcblxuXHQvKiBQb3NpdGlvbiB0aGUgaW5mb3RpcCB0ZXh0IC0gc2VlIGV4YW1wbGVzIGJlbG93ISAqL1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHotaW5kZXg6IDk5OTk7XG59XG5cbi8qIFNob3cgdGhlIGluZm90aXAgdGV4dCB3aGVuIHlvdSBtb3VzZSBvdmVyIHRoZSBpbmZvdGlwIGNvbnRhaW5lciAqL1xuLmluZm90aXA6aG92ZXIgLmluZm90aXB0ZXh0IHtcblx0dmlzaWJpbGl0eTogdmlzaWJsZTtcbn1cblxuLmluZm90aXAgLmluZm90aXB0ZXh0LmluZm90aXB0ZXh0LXJpZ2h0IHtcblx0dG9wOiAtNXB4O1xuXHRsZWZ0OiAxMDUlO1xufVxuXG4uaW5mb3RpcCAuaW5mb3RpcHRleHQuaW5mb3RpcHRleHQtbGVmdCB7XG5cdHRvcDogLTVweDtcblx0cmlnaHQ6IDEwNSU7XG5cdHdpZHRoOiAzNTBweDtcbn1cblxuLmluZm90aXAgLmluZm90aXB0ZXh0LmluZm90aXB0ZXh0LXRvcCB7XG5cdHdpZHRoOiAxMjBweDtcblx0Ym90dG9tOiAxMDAlO1xuXHRsZWZ0OiA1MCU7XG5cdG1hcmdpbi1sZWZ0OiAtNjBweDsgLyogVXNlIGhhbGYgb2YgdGhlIHdpZHRoICgxMjAvMiA9IDYwKSwgdG8gY2VudGVyIHRoZSBpbmZvdGlwICovXG59XG5cbi5pbmZvdGlwIC5pbmZvdGlwdGV4dC5pbmZvdGlwdGV4dC1ib3R0b20ge1xuXHR3aWR0aDogMTIwcHg7XG5cdHRvcDogMTAwJTtcblx0bGVmdDogNTAlO1xuXHRtYXJnaW4tbGVmdDogLTYwcHg7IC8qIFVzZSBoYWxmIG9mIHRoZSB3aWR0aCAoMTIwLzIgPSA2MCksIHRvIGNlbnRlciB0aGUgaW5mb3RpcCAqL1xufVxuIl0sInNvdXJjZVJvb3QiOiIifQ== */
    </style>
    <style>
        html,
        body,
        #root {
            height: 100%;
        }

        body {
            font-family: Roboto, Helvetica, Arial, sans-serif;
        }

        /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jc3MvaW5kZXguY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Q0FHQyxZQUFZO0FBQ2I7O0FBRUE7Q0FDQyxpREFBaUQ7QUFDbEQiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sLFxuYm9keSxcbiNyb290IHtcblx0aGVpZ2h0OiAxMDAlO1xufVxuXG5ib2R5IHtcblx0Zm9udC1mYW1pbHk6IFJvYm90bywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZjtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */
    </style>
</head>

<body class="h-100" style="">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" class="h-100">
        <div class="d-flex flex-column bg-dark text-white h-100 container-fluid align-items-stretch">
            <div class="row">
                <div class="pe-0 col">
                    <div class="py-0 border-bottom border-secondary" data-bs-theme="dark">
                        <div class="row w-100 gx-1">
                            <div class="col-2">

                            </div>
                            <div class="col-6 titlebar"></div>
                            <div class="col-3">

                            </div>
                            <div class="col-1">
                                <div class="btn-group h-100 window-ctrls float-end" role="group"><button type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">minimize</button><button
                                        type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">maximize</button><button
                                        type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-danger">close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-grow-1 row">
                <div class="h-100 border-end border-secondary col-3">
                    <div class="d-flex h-100 flex-column">
                        <div class="d-flex justify-content-between align-items-center py-2">
                            <div>Collections</div>
                            <div><button type="button" class="btn btn-sm btn-info">New Collection</button></div>
                        </div>
                        <div class="py-3 overflow-scroll flex-grow-1 bg-danger">
                            <div class="tree-node">I need this box to be scrollable</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                        </div>
                    </div>
                </div>
                <div class="h-100 d-flex flex-column col-9">
                    <div class="d-flex justify-content-center align-items-center h-100">
                        <div class="bg-light p-5"><img class="img-fluid" src="" alt="image here">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->



</body>

</html>

字符串
我需要使红框可滚动。我使用的是flex和flex-grow-1 css类
请指示。
我试着用H-100控制高度，但没能修好

twitter-bootstrap

来源：https://stackoverflow.com/questions/77638707/can-not-make-bootstrap-flex-box-scrollable

4条答案

按热度按时间

omhiaaxx1#

尝试添加样式属性style=“height：1 px;”因为要启用滚动，您需要指定一个固定值的高度。

<div class="py-3 overflow-scroll flex-grow-1 bg-danger " style="height:1px;">
                            <div class="tree-node">I need this box to be scrollable</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                        </div>

字符串

赞(0）回复(0）举报 9个月前

omqzjyyz2#

我不知道为什么，但我可以通过在红框上设置一个小高度（1 px）来修复它，因为它有flex-grow-1类，它会扩展并占用父级中的可用空间
我在html和body标签中添加了vh-100
我添加了这个CSS规则

.flex-grow-1 {
    height: 1px !important;
}

字符串
这是最终代码

<html lang="en" class="vh-100">

<head>
    <meta charset="utf-8">
    <link rel="icon" href="/icons/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/icons/logo192.png">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Nodex - Requester</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet">
    <script defer="" src="/static/js/bundle.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body,
        #root {
            height: 100%;
        }

        body {
            font-family: Roboto, Helvetica, Arial, sans-serif;
        }

        .flex-grow-1 {
            height: 1px !important;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .user-select-none {
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .tree-node>.collapse {
            position: relative;
        }

        .tree-node-icon {
            margin-right: 0.5rem;
        }

        .tree-node .tree-node {
            padding-left: 1.5rem;
        }

        .tree-node.active>div:first-child {
            color: #ffc107 !important;
        }

        .tree-node>.collapse.show:before {
            position: absolute;
            display: block;
            width: 1px;
            height: 100%;
            margin-left: 5px;
            content: "";
            background-color: gray;
        }

        .tree-node>div>.tree-node-ctrls {
            display: none;
        }

        .tree-node>div:first-child:hover {
            background-color: #444;
        }

        .tree-node>div:hover>.tree-node-ctrls {
            display: block;
        }

        .tree-node-icon .badge {
            width: 60px;
            text-align: center;
        }

        .titlebar {
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-app-region: drag;
        }

        .nav {
            --bs-nav-link-padding-x: 1rem;
            --bs-nav-link-padding-y: 0.05rem;
        }

        .response-section.maximized {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background: rgba(var(--bs-dark-rgb));
        }

        .response-section.maximized .response-section-title {
            margin-left: 100px;
        }

        .btn-small-height {
            --bs-btn-padding-y: 0.1rem;
            --bs-btn-padding-x: 0.4rem;
            --bs-btn-font-size: 0.75rem;
        }

        .window-ctrls i {
            width: 16px;
            height: 16px;
            font-size: 10px;
            margin-right: -4px;
        }

        /* infotip container */
        .infotip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }

        /* infotip text */
        .infotip .infotiptext {
            visibility: hidden;
            background-color: var(--bs-primary) !important;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;

            /* Position the infotip text - see examples below! */
            position: absolute;
            z-index: 9999;
        }

        /* Show the infotip text when you mouse over the infotip container */
        .infotip:hover .infotiptext {
            visibility: visible;
        }

        .infotip .infotiptext.infotiptext-right {
            top: -5px;
            left: 105%;
        }

        .infotip .infotiptext.infotiptext-left {
            top: -5px;
            right: 105%;
            width: 350px;
        }

        .infotip .infotiptext.infotiptext-top {
            width: 120px;
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
            /* Use half of the width (120/2 = 60), to center the infotip */
        }

        .infotip .infotiptext.infotiptext-bottom {
            width: 120px;
            top: 100%;
            left: 50%;
            margin-left: -60px;
            
        }
    </style>
</head>

<body class="vh-100" style="">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" class="vh-100">
        <div class="d-flex flex-column bg-dark text-white h-100 container-fluid align-items-stretch">
            <div class="row">
                <div class="pe-0 col">
                    <div class="py-0 border-bottom border-secondary" data-bs-theme="dark">
                        <div class="row w-100 gx-1">
                            <div class="col-2">

                            </div>
                            <div class="col-6 titlebar"></div>
                            <div class="col-3">

                            </div>
                            <div class="col-1">
                                <div class="btn-group h-100 window-ctrls float-end" role="group"><button type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">minimize</button><button
                                        type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">maximize</button><button
                                        type="button"
                                        class="h-100 cursor-pointer rounded-0 btn btn-outline-danger">close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-grow-1 row">
                <div class="h-100 border-end border-secondary col-3">
                    <div class="d-flex h-100 flex-column">
                        <div class="d-flex justify-content-between align-items-center py-2">
                            <div>Collections</div>
                            <div><button type="button" class="btn btn-sm btn-info">New Collection</button></div>
                        </div>
                        <div class="py-3 overflow-auto flex-grow-1 bg-danger">
                            <div class="tree-node">I need this box to be scrollable</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">node title here</div>
                            <div class="tree-node">last node</div>
                        </div>
                    </div>
                </div>
                <div class="h-100 d-flex flex-column col-9">
                    <div class="d-flex justify-content-center align-items-center h-100">
                        <div class="bg-light p-5"><img class="img-fluid" src="" alt="image here">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->



</body>

</html>

型
有人能解释一下吗？

赞(0）回复(0）举报 9个月前

hi3rlvi23#

给予max-height:100vh;就可以了;

赞(0）回复(0）举报 9个月前

sulc1iza4#

我已经解决了这个问题，使用自定义样式，它可能会帮助你。

html,
        body,
        #root {
            height: 100%;
        }

        body {
            font-family: Roboto, Helvetica, Arial, sans-serif;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .user-select-none {
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .tree-node>.collapse {
            position: relative;
        }

        .tree-node-icon {
            margin-right: 0.5rem;
        }

        .tree-node .tree-node {
            padding-left: 1.5rem;
        }

        .tree-node.active>div:first-child {
            color: #ffc107 !important;
        }

        .tree-node>.collapse.show:before {
            position: absolute;
            display: block;
            width: 1px;
            height: 100%;
            margin-left: 5px;
            content: "";
            background-color: gray;
        }

        .tree-node>div>.tree-node-ctrls {
            display: none;
        }

        .tree-node>div:first-child:hover {
            background-color: #444;
        }

        .tree-node>div:hover>.tree-node-ctrls {
            display: block;
        }

        .tree-node-icon .badge {
            width: 60px;
            text-align: center;
        }

        .titlebar {
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-app-region: drag;
        }

        .nav {
            --bs-nav-link-padding-x: 1rem;
            --bs-nav-link-padding-y: 0.05rem;
        }

        .response-section.maximized {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background: rgba(var(--bs-dark-rgb));
        }

        .response-section.maximized .response-section-title {
            margin-left: 100px;
        }

        .btn-small-height {
            --bs-btn-padding-y: 0.1rem;
            --bs-btn-padding-x: 0.4rem;
            --bs-btn-font-size: 0.75rem;
        }

        .window-ctrls i {
            width: 16px;
            height: 16px;
            font-size: 10px;
            margin-right: -4px;
        }

        /* infotip container */
        .infotip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }

        /* infotip text */
        .infotip .infotiptext {
            visibility: hidden;
            background-color: var(--bs-primary) !important;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;

            /* Position the infotip text - see examples below! */
            position: absolute;
            z-index: 9999;
        }

        /* Show the infotip text when you mouse over the infotip container */
        .infotip:hover .infotiptext {
            visibility: visible;
        }

        .infotip .infotiptext.infotiptext-right {
            top: -5px;
            left: 105%;
        }

        .infotip .infotiptext.infotiptext-left {
            top: -5px;
            right: 105%;
            width: 350px;
        }

        .infotip .infotiptext.infotiptext-top {
            width: 120px;
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
            /* Use half of the width (120/2 = 60), to center the infotip */
        }

        .infotip .infotiptext.infotiptext-bottom {
            width: 120px;
            top: 100%;
            left: 50%;
            margin-left: -60px;
            
        }

个字符

赞(0）回复(0）举报 9个月前

我来回答

无法使 Bootstrap 的弹性框滚动

4条答案

相关问题

热门标签

最新问答