0

I am trying to create an unordered list of books. They should have fixed widths. For some reason, every time I add overflow: hidden; to it, the fixed width does not work.

I can see in devtools that the style is being applied to the list item, but it is not at the width I set it to. Can someone please point out the error?

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, 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,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>
</ul>
SN Covers
  • 21
  • 2
  • 1
    You have several conflicting overriding positional styling attributes and conflicting widths of ul v li. Remove position absolute and float and remove width from ul, as this will crop your li tags. Replace display: inline flex with just flex and choose flex-direction to be either col or row. – Steve Tomlin Oct 22 '20 at 04:17
  • I actually wanted the user to be able to scroll vertically through the list items, thus I set a fixed width for the
      also. Is there any way to do so?
     – SN Covers Oct 22 '20 at 04:34
  • 1
    you want it to scroll horizontaly or just to have the width – godfather Oct 22 '20 at 04:41
  • Just wanted to scroll horizontally. I didn't know it was possible to scroll without fixed width! – SN Covers Oct 22 '20 at 04:48
  • 1
    you can use flex-shrink:0; or min-width instead of width on li tag – godfather Oct 22 '20 at 04:58
  • It worked! Thank you very much, @godfather. – SN Covers Oct 22 '20 at 06:40