Make the box width fit to its content always 10px padding [duplicate]

问题

Please see this code and image. If I resize the window, the red box stretches, but I want the red box's width always just fit for its content. (I do not want empty space at the right side) How to correct this? Also, why it didnt display background color yellow?

Please see the preview Image

<style>    
.main {
  border: 10px solid red;
  padding:10px;
  display: flex;
  flex-wrap: wrap;
  background color:yellow!important;
}

 .main div {
  width: 150px;
  height: 150px;
   border: 1px solid black;
}
</style>

<body>



<div class="main" >
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>

来源：https://stackoverflow.com/questions/61750382/make-the-box-width-fit-to-its-content-always-10px-padding

标签

javascript

html

css

Sass

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!