CSS：2个div并排，右div在调整大小时被切断

Question

我正在尝试创建一个基本的CSS页面，其中包含两个并排的div，一个用于左侧导航，一个用于内容。我正在关注此页面上的答案：

CSS 2 Div Layout float

我可以并排显示我想要的外观，但是当我调整浏览器大小时，正确的div内容将被切断。

浏览器（Chrome）屏幕的整个宽度：

浏览器调整大小：

我的代码（我们正在使用引导程序）：

SELECT
    TABLE_NAME, 
    COLUMN_NAME,
    DATA_TYPE
        + CASE WHEN DATA_TYPE IN ('char','nchar','varchar','nvarchar','binary','varbinary')
                    AND CHARACTER_MAXIMUM_LENGTH > 0 THEN
                 COALESCE('('+CONVERT(varchar,CHARACTER_MAXIMUM_LENGTH)+')','')
            ELSE '' END
        + CASE WHEN DATA_TYPE IN ('decimal','numeric') THEN
                COALESCE('('+CONVERT(varchar,NUMERIC_PRECISION)+','+CONVERT(varchar,NUMERIC_SCALE)+')','')
            ELSE '' END
        AS Declaration_Type,
    CASE WHEN IS_NULLABLE='NO' THEN 'NOT ' ELSE '' END + 'NULL' AS Nullable
FROM INFORMATION_SCHEMA.COLUMNS
ORDER BY 1,2

Answer 1

我注意到您在第二个margin-left: 320px上有一个div，这可能会将内容推到Windows框架之外，因为它实际上超出了侧边栏的宽度。如果您希望内容不超出浏览器的边界，请尝试添加padding

尝试使用此结构，可能会有所帮助，因为侧边栏具有固定的宽度，内容使用剩余的空间。

.wrapper {
   display: flex;
   height: 100vh;
   align-items: stretch;
}

.sidebar {
   background-color: #EEEEEE;
   min-width: 300px;
}

.content {
   color: white;
   background-color: black;
   padding: 20px;
   margin-left: 20px;
}

<div class="wrapper">
   <div class="sidebar">
      
   </div>
   <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
   </div>
</div>