列表项固定宽度无法正常工作

如何解决列表项固定宽度无法正常工作

我正在尝试创建无序的书籍清单。它们应具有固定的宽度。由于某种原因，每次我向其中添加overflow: hidden;时，固定宽度均不起作用。

我可以在devtools中看到样式已应用于列表项，但不是我设置的宽度。有人可以指出错误吗？

ul.sideul {
  display: inline-flex;
  float: left;
  position: absolute;
  top: 170px;
  left: 0;
  height: auto;
  width: 360px;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

ul.sideul li {
  float: left;
  list-style: none;
  position: relative;
  width: 238px;
  height: 277px;
  border-radius: 0px 20px 20px 0px;
  background: #fff;
  Box-shadow: 10px 10px 10px rgba(0,0.16);
  margin: 0 20px;
  padding-top: 49px;
  --bookmark: #A68AF5;
}

<ul class="sideul">
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="19.28" height="30.849" viewBox="0 0 19.28 30.849">
        <path
          class="a"
          d="M8.355,1.928V32.777l9.64-9.64,9.64,9.64V1.928Z"
          transform="translate(-8.355 -1.928)"
        />
      </svg>
    <p class="head">Notes for Work. Going Home.</p>
    <p class="body">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,nam! Lorem lorem ipsum dolor sit amet ipsum dolor sit amet
    </p>
    <p class="end">8 min Read</p>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="19.28" height="30.849" viewBox="0 0 19.28 30.849">
        <path
          class="a"
          d="M8.355,nam! Lorem lorem ipsum dolor sit amet ipsum dolor sit amet
    </p>
    <p class="end">8 min Read</p>
  </li>
</ul>

解决方法

解决方案是添加

ul li{    
  flex-shrink: 0; 
}

正如教父在评论中所指出的那样。