jquery ui tabs not showing any content except for first tab

Question

I have a set of tabs and in each tab is a div with a few sub divs. The .tabs() call creates the Tab headings and displays the first div ...

Clicking on second tab ... "Background" doesn't show its despite being the same as the div under the first tab ... which works.

Here is a js fiddle

https://jsfiddle.net/GeoffRussell/cy6uL41d/

<div id="tabset">
    <ul> 
        <li><a href="#policytab">Policy</a></li>
        <li><a href="#backgroundtab">Background</a></li>
    </ul>
<div id="policytab">
    <div class="panel cflex">
        <div class="textdiv" contenteditable="true">xx</div>
        <div>
            <div class="lrflex">
            <div>L1</div>
            <div class="rflex">
                <div>R1</div>
                <div>R2</div>
            </div>
        </div>
    </div>
</div>
<div id="backgroundtab">
    <div class="panel cflex">
        <div class="textdiv" contenteditable="true">xx</div>
        <div>
            <div class="lrflex">
            <div>L1</div>
            <div class="rflex">
                <div>R1</div>
                <div>R2</div>
            </div>
        </div>
    </div>
</div>
</div>

With CSS as follows

.panel {
    height: 200px;
    border: 1px solid red;
    resize: both;
    overflow: auto;
}
.textdiv {
    border: 1px solid red;
    height: 1500px;
    overflow: auto;
}
.cflex {
    display: flex;
    flex-direction: column;
}
.rflex {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    border: 1px solid purple;
}
.lrflex {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    border: 1px solid green;
}

With the action being ...

$("#tabset").tabs();

Answer 1

似乎我在 class="lrflex" div 之前的额外级别导致了问题......但我不知道为什么。

Answer 2

I think your tab is working fine but your content text is same, that why not showing tabs result. so i quest to you change content and check again.