[TIL] 2022. 12. 15. CSS 스크롤바, Flex

스크롤바 커스텀 디자인

/* width */
::-webkit-scrollbar {
  width: 0.5rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

How To Create a Custom Scrollbar

스크롤바 위치 고정

.부모 {
  overflow-y: overlay;
}

CSS Flex 속성

flex: 1 1 0; /* grow shrink basis */

flex - CSS: Cascading Style Sheets | MDN

• 몸 건강이 최고다.
• CSS 지옥에 빠졌다.