공백: 이제 flex로 랩: 1 하위 너비가 너무 작아서 텍스트를 수용할 수 없습니다.

Question

두 개의 동일한 크기의 div를 한 줄에 텍스트에 맞추는 솔루션을 찾을 수 없습니다. 공백처럼 보입니다. 상위 너비:fit-content를 설정한 후에는 이제 너비가 고려되지 않습니다.

가능한 한 작아야 하고, 항상 같은 크기여야 하며, 두 번째 줄에 텍스트를 줄 바꿈하지 마세요.

div {
  디스플레이: 플렉스;
  너비: 내용에 맞게;
}

.버튼 {
  패딩: 10px 20px;
  플렉스: 1;
  공백: nowrap;
  최소 너비: 130px;
  너비: 내용에 맞게;
}

.button1 {
  배경: 빨간색;
}

.button2 {
  배경: 녹색;
}

  
짧은 텍스트
  
너비가 더 큰 긴 텍스트 버튼 

Answer 1

CSS 그리드를 사용하여 수행할 수 있습니다:

으아악 으아악