211025 How to change width of flex-item to 100%

somoim ํ”„๋กœ์ ํŠธ๋ฅผ ์˜ค๋žœ๋งŒ์— ์žก์•„์„œ ๋Œ“๊ธ€ api๋ฅผ ๋‹ฌ๊ณ  ์žˆ๋Š” ์ค‘์— ๋ชจ์ž„ ์ƒ์„ธ ํŽ˜์ด์ง€์˜ css์— ์–ด์šธ๋ฆฌ๊ฒŒ ๋Œ“๊ธ€ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋„ฃ์œผ๋ ค๊ณ  ํ–ˆ๋‹ค.
๋Œ“๊ธ€ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋Œ“๊ธ€ ์ž…๋ ฅ์นธ๊ณผ ๋Œ“๊ธ€ ๋ฆฌ์ŠคํŠธ๋กœ ๋‚˜๋ˆ„์—ˆ๋Š”๋ฐ flex ๋ฐ•์Šค๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์–ด์„œ ๋‘๊ฐœ๊ฐ€ ์—ฐ๋‹ฌ์•„ ์˜†์œผ๋กœ ๋ถ™์–ด์žˆ์—ˆ๋‹ค. ์ž…๋ ฅ์นธ์ด 100%์˜ ๋„ˆ๋น„๋ฅผ ๊ฐ–๊ณ  ๊ทธ ์•„๋ž˜๋กœ ๋Œ“๊ธ€ ๋ฆฌ์ŠคํŠธ์˜ ๋„ˆ๋น„๋ฅผ 100%๋กœ ์•„๋ž˜ ์Œ“์ด๊ฒŒ ํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ input ํƒœ๊ทธ์— display: block, width: 100%์„ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋  ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ ์šฉ๋˜์ง€ ์•Š์•˜๋‹ค.
ย 
์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ์—์„œ ์ฐพ์•„๋ณด๋‹ˆ ๋Œ“๊ธ€ ์ปจํ…Œ์ด๋„ˆ์˜ ์Šคํƒ€์ผ์— flex-wrap: wrap; ์„ ์ค˜์•ผ ํ–ˆ๋‹ค.
๊ทธ ๋‹ค์Œ ๋Œ“๊ธ€ ์ž…๋ ฅ์นธ, ๋Œ“๊ธ€ ๋ฆฌ์ŠคํŠธ ๊ฐ๊ฐ์— flex: 0 0 100%;๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๊ณผ width: 100%;๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ๋‹ค.
flex-wrap ์†์„ฑ์— ๋Œ€ํ•ด ๋ชจ๋ฅธ๋‹ค๋ฉด ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†์—ˆ์„ ๊ฒƒ์ด๋‹ค. ๋‹ค์‹œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด์•ผํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.
ย 
.commentsContainer {
	border: 1px solid rgb(220, 220, 244);
	padding: 10px;
	display: flex;
	// flex-wrap: wrap;
}
notion image
(flex-wrap์„ ์•ˆ ์ฃผ๊ณ  flex-items์— width: 100%;๋ฅผ ์ค˜๋„ ๊ฐ๊ฐ์ด ๋์— ๋ถ™์–ด์„œ ๋„ˆ๋น„๋ฅผ ๊ฐ–์ง€ ๋ชปํ•˜๊ณ  ์žˆ๋‹ค.)
ย 
.commentsContainer {
	border: 1px solid rgb(220, 220, 244);
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
}

.commentsEditor {
  flex: 0 0 100%;
  // width: 100%;
  input {
  }
}
.commentsList {
  flex: 0 0 100%;
  // width: 100%;
  section {
    padding: 0px;
    background: black;
    article {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 5px;
      p {
        word-break: keep-all;  
      }
    }
  }
}
notion image
flex: 0 0 100%; width: 100%;
๋‘˜์ค‘ ํ•˜๋‚˜๋ฅผ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋„ˆ๋น„ 100%๋กœ ์Œ“์ด๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

flex-wrap

CSSย flex-wrapย property๋Š”ย flex-itemย ์š”์†Œ๋“ค์ด ๊ฐ•์ œ๋กœ ํ•œ์ค„์— ๋ฐฐ์น˜๋˜๊ฒŒ ํ•  ๊ฒƒ์ธ์ง€, ๋˜๋Š” ๊ฐ€๋Šฅํ•œย ์˜์—ญ ๋‚ด์—์„œ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๊ณ  ์—ฌ๋Ÿฌํ–‰์œผ๋กœ ๋‚˜๋ˆ„์–ด ํ‘œํ˜„ ํ•  ๊ฒƒ์ธ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์˜์—ญ ๋‚ด์—์„œ ๋ฒ—์–ด๋‚˜์ง€ ๋ชปํ•˜๊ฒŒ ์„ค์ •ํ•œ๋‹ค๋ฉด, ๋™์‹œ์— ์š”์†Œ์˜ ๋ฐฉํ–ฅ ์ถ•์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ถ”๊ฐ€ ์ •๋ณด:flex-wrapย ์†์„ฑย ์˜ ์ดˆ๊ธฐ ๊ฐ’์€ย nowrap์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๋ชจ๋“  ํ•ญ๋ชฉ์ด ํ•œ ์ค„์— ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.ย MDN
ย