在列表中添加overflow: auto后列表项宽度减小

Question

我已经包含了一个示例代码，其中发生在下面的代码片段中（查看 .list-id）：

问题：宽度设置为 220px 而实际上是 71.391px

.featured-products-container {
  display: flex;
}
.list {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  height: 400px;
  width: 400px !important;
  list-style-type: none;
  overflow: auto;
  white-space: nowrap;
  width: max-content;
}
.list-id {
  height: 100%;
  width: 220px;
  padding: 30px 0 0 30px;
  box-sizing: border-box;
}
.list-title {
  margin: 0;
}
.list-description {
  text-wrap: wrap;
}
.featured-products {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.product {
width: 200px;
height: 200px;
background-color: blue;
}

<ul class="list">
    <li class="list-id">
      <h3 class="list-title">Products</h3>
      <p class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </li>
    <ul class="featured-products">
      <li class="product">
      </li>
      <li class="product">
      </li>
      <li class="product">
      </li>
    </ul>
  </ul>

如果有人能帮助我解决这个问题，我将不胜感激。 预先感谢您的回答。

Answer 1

问题是你的父母

ul.list

有

display: flex

。设置此值后，指定的宽度将被忽略。您可以使用

flex-basis

或将子级移动到

div

中并将它们设置为

inline

元素，这应该将它们排成一行。