<fieldset>이 플렉스 컨테이너가 될 수없는 이유는 무엇입니까?

나는 스타일을 시도 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있다 요소를 교체 .

보고 된 버그 :

버그 크롬 (여전히 열려 있음)
버그 파이어 폭스 (v46 이후 수정)

가능한 해결 방법 :

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

최신 정보

에서 크롬 버전 83 button 작업 할 수 있습니다 display: inline-grid/grid/inline-flex/flex, 당신은 아래의 데모를 볼 수 있습니다

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

버그 우선 순위를 높이려면 Chrome 버그에 별표를 표시하십시오.

이것은 Chrome의 버그입니다. 이 문제에 별표를 추가하여 우선 순위를 높이십시오 ( https://bugs.chromium.org/p/chromium/issues/detail?id=375693).

그 동안이 문제를 해결하는 방법을 보여주기 위해이 세 가지 코드 펜 예제를 만들었습니다. 예제를 위해 CSS Grid를 사용하여 빌드되었지만 flexbox에도 동일한 기술을 사용할 수 있습니다.

범례 대신 aria-labelledby 사용

이것이 문제를 해결하는 더 적절한 방법입니다. 단점은 모든 가짜 범례 요소에 적용되는 고유 ID 생성을 처리해야한다는 것입니다.

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

fieldset 및 legend 대신 role = "group"및 aria-labelledby 사용

flex-container가 형제 요소의 높이까지 뻗어 있고 그 뻗기를 그 자식에 전달하려면 role="group"대신에을 사용해야 합니다.<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

스타일링 목적으로 가짜 복제 범례 만들기

이것은 훨씬 더 해키 방법입니다. 그것은 여전히 ​​액세스가 가능하지만이 방법으로 ID를 처리 할 필요는 없습니다. 주요 단점은 실제 범례 요소와 가짜 범례 요소 사이에 내용이 중복된다는 것입니다.

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

전설은 반드시 직접 계승자 여야합니다

이 문제를 직접 해결하려고 시도하면 다음과 같이하십시오.

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

당신은 그것이 효과가 있다는 것을 알게 될 것이고, 아마도 그것을 다시 생각하지 않고 나아갈 것입니다.

문제는 필드 세트와 범례 사이에 div 래퍼를 넣으면 두 요소 간의 관계가 끊어진다는 것입니다. 이로 인해 fieldset / legend의 의미가 깨집니다.

따라서 이렇게하면 fieldset / legend 사용의 전체 목적을 처음부터 이겼습니다.

또한 해당 필드 세트에 범례를 제공하지 않으면 필드 세트를 사용하는 데 큰 의미가 없습니다.

내 경험상, 나는 <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>

파이어 폭스, 크롬 및 사파리에는 분명히 필드 세트에 버그가 있다고 생각하기 때문에 역할 그룹을 사용해야 할 수도 있습니다. 그런 다음 CSS의 선택기는 단순히

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

편집 : 다른 사람들이 겪고있는 몇 가지 문제가 있습니다.

문제 375693

문제 262679

<fieldset>다음 소품으로 추가 div를 넣을 수 있습니다 .

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

원래 질문에 대답하려면 : 그렇습니다. 버그이지만 질문을받을 당시에는 잘 정의되지 않았습니다.

이제 fieldset에 대한 렌더링이 더 잘 정의됩니다. https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

파이어 폭스와 사파리에서 flexbox에 fieldset작동합니다. 아직 Chromium에 없습니다. ( https://bugs.chromium.org/p/chromium/issues/detail?id=375693 참조 )

2018 년 사양에서 개선 된 사항 은 https://blog.whatwg.org/the-state-of-fieldset-interoperability 를 참조 하십시오 .