在子元素中使用百分比时的最小宽度问题

由 发布于

所以基本上，问题是当我希望父元素div占用页面的30％的最小宽度时，它需要100％的页面。但是，当我将其更改为width：30％时，它可以正确执行。为什么最小宽度不能正常工作，我应该怎么做才能使它正常工作？

这是HTML

<body>
    <div class="parent">
         <p> Sign Up Now</p>
        <label for="email">Email:</label> <input placeholder="email"><br />
        <label for="password">Password:</label> <input placeholder="pass"><br />
         <label for="PhoneNumber">PhoneNumber:</label> <input placeholder="PhoneNumber">
    </div>
</body>

的CSS

body,html
{
    background-color:red;
    width:100%;
    height:100%;
    margin:0;
    padding:0;

}
.parent{
    background-color:yellow;
    width:30%;
    height:50%;
    margin: 0 auto;
    text-align:center;
    margin-top:40px; 
   }

Also I attached it here to visualize what I mean https://jsfiddle.net/u6tvbqj0/2/