CSS div width not working

Question

I have a strange problem.One of my div's width is not working. My CSS is like

.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; } 

And My HTML file is

<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> 

But as you can see in the attached image my div product_info's width is not 850px, Whats wrong

Answer 1

display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.

Width and height basically lose the original meaning and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis