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

所以基本上,问题是当我希望父元素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/

评论
  • wfuga
    wfuga 回复

    Because it is working correctly. Block elements take full width of their parent, which, in this case, is <body>. Min-width doesn't constrain it in any way. You can check the reference here: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

  • aumujun
    aumujun 回复

    As the name suggests min-width means that the element will have atleast 30% width relative to its parent ( can be 30% and more upto 100%) . Since div is a block level element, it wants to take up the complete space available to it, and it'll expand to 100%.

    You should use max-width to limit the width to a certain number. Here max-width: 30% will give you the same result as the width will be atmost 30% relative to its parent.

    希望这可以帮助并解决问题!