CSS div宽度不起作用

Question

我有一个奇怪的问题。我的 div 的一个宽度不起作用。我的 CSS 就像

.product_info
{
    margin-top:10px;
    background:#444;
    width:850px;

}
.product_image
{
    width:350px;
    text-align:center;
    float:left;
    padding:8px;
    border:1px solid #e9e9e9;
    background:#fff;
}
.product_details
{
    float:left;
    width:400px;
    margin-left:25px;
    font-size:14px;
    font-family:"Helvetica";
    background:#d71414;
}

我的 HTML 文件是

<div class="product_info">
                <div class="product_image">

                </div>

                <div class="product_details">
                    <div class="selection">
                    <form action="{$path_site}{$indeex_file}" method="post">
                    Size
                    {foreach name = feach item = k from = $product_size}
                        <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
                    {/foreach}

                    </div>

                    <div class="selection">
                    No. of pieces <input type="text" name="quantity">

                    </div>
                    <div class="prc">
                        <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
                            </div>

                    <div class="buy_btn"><input type="submit" value="BUY" /></div>
                    </form>
                </div>
            </div>

但正如您在附图中看到的那样，我的 div product_info 的宽度不是 850px ，出了什么问题

原文由 Nitish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试

显示：块

它应该工作

原文由 Vishal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

display: flex 在父元素上 也改变了 width 和 height 的工作方式。通过 flex: 0 0 auto; 禁用收缩/增长，或使用 min-width 和 max-width 代替。

width 和 height 在这种情况下基本上失去了原来的意义，将充当 flex-basis ，参见 geddski：The Difference Between Width and Flex Basis

 .box {
  margin: 2px;
  border: 1px solid black;
  padding: 3px;
}
.box.gray {
  background: lightgray;
}
.box.container {
  display: flex;
  flex-flow: row;
}

 <div class="box" style="
  width: 300px;
  font-size: 80%;
">
  <div>
      width: 300px;
  </div>
  <div class="box container">
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
  </div>

  <div class="box container">
    <div class="box gray" style="
      width: 200px;
      flex: 0 0 auto;
    ">
      width: 200px;<br>
      flex: 0 0 auto;
    </div>
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
  </div>

</div>

原文由 Tamas Hegedus 发布，翻译遵循 CC BY-SA 4.0 许可协议