Question

我有一个容器，里面有两个伸缩盒。

第一个伸缩框是我的内容框的标题。
我还有另一个flex-box，它是内容框内容的容器。

每当我缩小浏览器时，标题就会溢出，从而覆盖内容框中的内容。

理想情况下，我希望页眉将内容下推而不是覆盖内容；但是，我无法弄清楚哪里出了问题。

任何帮助将不胜感激。

 <head>
  <style>
   body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#F8F8F8;
   }
   .wrapper{
    padding-top:60px;
    padding-left:60px;
    display:flex;
    flex-wrap:wrap;
   }
   .content-box{
    flex:1 0 30%;
    min-height:360px;

    position: relative;
    background-color:white;
    border-radius:4px;
    margin:10px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
   }
   .header-wrapper{ 
    flex:1; 
    background-color:purple;
    position: absolute;
    margin-left:5%;
    border-radius:2px;
    top: -15;
    min-height:75px;
    width:90%;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
   }
   .header{
   }
   .header-info{
   }
   .header p{ 
    position: absolute;
    color: white;
    top: 30;
    left: 12;
   }
   .header h1{ 
    position: absolute;
    color: white;
    top: -15;
    left: 10;
   }
   .content-wrapper{
    margin-top:5%;
   }
   .content{    
    border:1px solid black;
    margin-left:5.5%;
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
   <div class="content-box">
    <div class="header-wrapper">
     <h1>Title</h1>
     <p>Subtext</p>
    </div>
    <div class="content-wrapper">
    <div class="content">
    <p>First Content Content</p>
    </div>
    </div>
   </div>
  </div>
 </body>
</html>

Answer 1

从position: absolute中删除.header-wrapper。

要将标题稍微放在容器上方，可以应用：

transform: translate(0, -50%);

如何使一个Flexbox在容器内移动另一个Flexbox？

1 个答案: