Question

当我在Flexbox容器中的项目上具有硬编码宽度时（使Chrome Devtools响应窗口变得非常狭窄），我的页面开始更改缩放，并且布局有些混乱。当我将查看区域缩小到小于300px时，问题就开始了。不幸的是，当在jsfiddle上的iframe中运行此问题时，您看不到此问题-它必须“自行运行”，我的html块必须是最上面的html块。

这里仍然是jsfiddle供参考：

https://jsfiddle.net/elijahww/9e1u7ptr/

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #productShowcaseContainer {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }

        .contentContainer {
            display: flex;
            flex: 1;
        }

        #productShowcaseTitle {
            height: 100px;
            background-color: antiquewhite;
        }


        #productShowcaseThumbnailContainer {
            flex: 1;
            background-color: darkseagreen;
        }
    </style>
</head>
<body style="margin: 0;">
<div id="productShowcaseContainer">
    <div id="productShowcaseTitle"></div>

    <div class="contentContainer">
        <div id="productShowcaseThumbnailContainer" style="padding: 10px;">
            <input style="width:300px;">
        </div>
    </div>
</div>

</body></html>

我不知道该怎么做。

这是一个gif：

Answer 1

之所以会发生这种情况，是因为您将输入字段的硬编码宽度设置为300px ，并尝试将屏幕宽度缩放到超过此宽度。如果您确实希望具有响应式布局，则应该正确使用flex-layout并设置每个布局元素的flex-basis，flex-grow和flex-shrink属性。

这些属性负责处理弹性元件的响应行为。要了解有关弹性版式的更多信息，请点击此链接Flex tutorial

Answer 2

一种选择是给一些父容器overflow-x: auto

body {
            background-color: #3d5d6a;
        }
        #container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }

        .main-content-container {
            display: flex;
            flex: 1;
        }

        #top-header-container {
            padding: 10px;
            height: 100px;
            background-color: antiquewhite;
            /*align-content: stretch;*/
            display: flex;
            justify-content: stretch;
        }


        #main-content-inner {
            flex: 1;
            background-color: darkseagreen;
        }

        .responsive-table {
            overflow-x: auto;
        }

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body style="margin: 0;">
<div id="container">
    <div id="top-header-container">
        <div class="responsive-table">
            <input style="width:400px;" value="hard coded to 400px">
        </div>

    </div>

    <div class="main-content-container">
        <div id="main-content-inner" style="padding: 10px;">
          test
        </div>
    </div>
</div>

</body></html>

Flexbox容器空间不足时，视口将更改缩放

2 个答案: