내 Flex 컨테이너의 입력 요소가 축소되지 않는 이유는 무엇입니까?

축소되지 않는 Flex 컨테이너 요소

플렉스 컨테이너 하우징 입력 및 버튼 요소 내에서 flex 및 flex-grow를 활용하려고 하면 예상되는 결과는 다음과 같습니다. 크기 조정 동작이 발생하지 않을 수 있습니다. 이 예외는 div와 달리 브라우저가 입력 요소에 할당한 기본 너비로 인해 발생합니다.

다음은 브라우저의 자동 너비 할당을 설명하는 스니펫입니다.

In 이 시나리오에서 브라우저는 flex 설정에 관계없이 입력에 설정된 너비를 지정합니다.

다음을 고려하세요.

input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

<form>
  <input>
  <br><br>
  <div></div>
</form>

제공된 스니펫에서 입력 요소는 해당 너비를 유지합니다. 기본 너비이며 div는 Flex 컨테이너의 크기에 맞게 조정됩니다.

위 내용은 내 Flex 컨테이너의 입력 요소가 축소되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!