时间戳

首页 > 解决方案 > 当容器比屏幕宽时填充正确？

html - 当容器比屏幕宽时填充正确？

问题描述

我有以下html树：

填充在顶部、底部和左侧正确应用，但在右侧不正确。

Html 树截图

我知道问题出在哪里，但我不确定如何解决。父 div 的宽度为375px，这是屏幕的宽度，而子 div 具有890px. 我怎样才能让父母像孩子一样扩展？

上面的父 div 还有一些其他祖先。我需要让它们全部扩展吗？

<!DOCTYPE html>

<html>

<head>
  <style>
    .parent {
      display: flex;
      flex-flow: row nowrap;
      padding: 2rem 1.25rem;
    }
    
    .child {
      background-color: #f5f8ff;
      border: 1px solid #eff5f5;
      display: flex;
      flex-flow: row nowrap;
      min-width: 100vw;
    }
    
    .item {
      align-items: center;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      height: 44px;
      width: 256px;
    }
  </style>
</head>

<body>
 <div class="parent">
   <div class="child">
     <div class="item">Foo</div>
     <div class="item">Bar</div>
     <div class="item">Baz</div>
     <div class="item">Qux</div>
   </div>
 </div>
</body>
</html>

标签： htmlcssscreen

解决方案

您的问题非常模糊，但是如果您希望您的父 div 基本上总是足够大以容纳您的子 div。您可以尝试将父 div 设置为 display: inline。

.parentdiv{
 display: inline;
 }

并且不设置宽度。父 div 总是足够大以容纳其子 div。

希望这可以帮助。

推荐阅读