왜 못해

왜 못해

플렉스 용기입니까?

---

나는 스타일을 시도 fieldset와 요소 display: flex와 display: inline-flex.

그러나, 그것은 작동하지 않았다 flex처럼 행동 block하고, inline-flex처럼 행동했습니다 inline-block.

이것은 Firefox와 Chrome 모두에서 발생하지만 이상하게는 IE에서 작동합니다.

버그입니까? HTML5 또는 CSS Flexible Box Layout 사양 fieldset에서 특별한 동작 이 있어야한다는 것을 알 수 없었습니다 .

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

---

버그 984869display: flex 에 따르면 - 버튼 요소에는 작동하지 않습니다 .

<button>순수 CSS에서는 (브라우저로) 구현할 수 없으므로 CSS의 관점에서 볼 때 약간의 블랙 박스입니다. 이것은 그들이 반드시 같은 방식으로 반응 할 필요는 없음을 의미합니다 <div>.

이것은 flexbox에만 국한된 것이 아닙니다. 예를 들어 overflow:scroll버튼을 눌렀을 때 스크롤바를 렌더링하지 않으며 , 버튼 을 씌우면 테이블로 렌더링하지 않습니다 display:table.

더 한 단계 물러 나면 이는 특정 적이 지 않습니다 <button>. 치다<fieldset> 과 <table> 또한 특수 렌더링 동작이 있습니다.

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

이 경우 Chrome은 Google에 동의하며 flex표시 모드를 무시 합니다. ( "abc"와 "def"가 수직으로 쌓이게된다는 사실에 의해 밝혀 짐). 그들이 기대하는 것을 수행한다는 사실 <button style="display:flex">은 구현 세부 사항 때문일 수 있습니다.

도마뱀 붙이의 버튼 구현에서, 우리는 하드 코드 <button>(그리고 <fieldset>,과 <table>)는 display속성에 관계없이 특정 프레임 클래스 (따라서 하위 요소를 배치하는 특정 방법)를 갖는 것으로 간주 됩니다.

하위 브라우저 방식으로 특정 레이아웃 모드에서 하위 항목을 안정적으로 정렬하려면 가장 좋은 방법은 내부에 있어야하는 것처럼 버튼 내부에 래퍼 div를 사용하는 것입니다 <table>또는<fieldset>.

따라서 해당 버그는 "잘못된 해결"로 표시되었습니다.

버그 1047590display: flex;<fieldset> 도 있습니다 . 현재 "확인되지 않은" 에서 작동하지 않습니다 .

---

좋은 소식 : Firefox 46 이상은 Flexbox for를 구현합니다 <fieldset>. 버그 1230207을 참조하십시오 .

---

나는이 크롬과 파이어 폭스에서 버그가 수 있습니다 발견 legend하고 fieldset있다 요소를 교체 .

보고 된 버그 :

버그 크롬
버그 파이어 폭스

가능한 해결 방법 :

가능한 해결 방법은 <div role="group">HTML에서 사용하고 CSS div[role='group']에서 선택 자로 적용하는 것입니다 .

---

내 경험에 의하면, 그 어느 것도 발견했습니다 <fieldset>,도 <button>,도 <textarea>제대로 사용할 수있는 display:flex속성 또는 상속.

다른 사람들이 이미 언급했듯이 버그가보고되었습니다. flexbox를 사용하여 순서를 제어하려면 (예 :) order:2요소를 div로 감싸 야합니다. flexbox가 실제 레이아웃과 치수를 제어하기를 원한다면 입력 컨트롤 대신 div를 사용하는 것이 좋습니다.

---

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Might need to use role-group because firefox, chrome and i think safari have a bug with fieldsets apparently. Then the selector in the CSS would simply be

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

Edit: Here are some issues that other people are experiencing as well.

Issue 375693

Issue 262679

---

you can put additional div in <fieldset> with the following props:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

참고URL : https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers