CSS：在单击时将网格中的项目扩展到其实际内容大小

Question

我对网页设计还很陌生，现在我正在为一些设计问题而苦苦挣扎。

我尝试做以下事情：

• 具有固定大小的项目的二维数组
• 项目有隐藏内容，点击展开
• 点击项目展开直到显示内容（但不超过 100% 宽度或 100% 高度）
• 当点击的项目展开时，它应该填满 1 行的宽度。如果左侧有项目，则单击的项目应切换到下一行并填充它。右侧的项目应推入下一行。

首先是有效的部分： 这是表格：

<div class="table-view">
    <my-item class="item"></my-item>
    <my-item id="one" class="item"></my-item>
<my-item class="item"></my-item>
<my-item class="item"></my-item>
</div>

餐桌造型：

.table-view {
    box-sizing: border-box;
    display: flex; 
    flex-wrap: wrap;
    
    gap: 1rem;
    padding: 1rem;
}
.item {
    max-width: 100%;
    background-color: green;
}
#one {
        background-color: red;
    flex-basis: 0;
}

JS部分

class ItemTable extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({mode: "open"})
        this.shadowRoot.appendChild(tableTpl.content.cloneNode(true))

        this.item = this.shadowRoot.getElementById('one');
        this.item.addEventListener('click', () => {
                this.shadowRoot.getElementById('one').style['flex-basis'] = '100%'
            this.item.setFocus(true)
        })
    }
}

window.customElements.define('item-table', ItemTable)

现在困难的部分 - 物品本身：

<div class="item-wrapper">
    <div id="close-btn">
        <div class="extendable">here is close button</div>
    </div>
    <div class="item-small">
        <div id="avatar">here is an avatar</div>
    </div>
    <div id="item-name">display name</div> 
    
    <div class="extendable hidden-content">hidden content</div>
</div>

造型

.item-wrapper {
    min-width: 16rem;
    min-height: 18rem;
    
    //keep the items small until clicked
    max-width: 16rem;
    max-height: 18rem;
    
    display: flex;
    flex-direction: column;
}
.item-small{
    width: 16rem;
    height: 16rem;
}
#item-name{
    box-sizing: border-box;
    height: 2rem;
    text-align: center;
    padding-top: 0.3rem;
    font-size: 1.2rem;
}
.extendable {
    display: none;
}
#avatar {
    height: 16rem;
    width: 16rem;
}
#close-btn {
    align-self: flex-end;
}
#close-btn {
    align-self: flex-end;
}
/*mock hidden content for testing purposes*/
.hidden-content{
    width: 18rem;
    height: 46rem;
    border: thick groove black;
}

class MyItem extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({mode: "open"})
        this.shadowRoot.appendChild(itemTpl.content.cloneNode(true))


        this.item = this.shadowRoot.querySelector('.item-wrapper');
        this.extendables = this.shadowRoot.querySelectorAll('.extendable')
        this.itemName = this.shadowRoot.querySelector('#item-name')
    }

    static get observedAttributes() {
        return ['is-focused']
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
        if (attrName === 'is-focused') {
            if (newVal === 'true') {
                this.showContent()
            } else {
                this.hideContent()
            }
        }
    }

    setFocus(focus) {
        this.setAttribute('is-focused', focus)
    }

    showContent() {
            this.itemName.style['display']='none'
        this.extendNpcSheet()
    }

    hideContent() {
        this.itemName.style['display'] = 'none'
    }

    extendNpcSheet(){
        this.extendables.forEach(e => {
            e.style['display'] = 'block'
        })
    }
}

window.customElements.define('my-item', MyItem)

这里有一个例子的链接：

https://jsfiddle.net/zap08tb7/

如您所见，“隐藏内容”的高度没有扩展。并且元素不会扩展到其内容大小，而是扩展到宽度的 100%。我不知道我怎么能做到这一点。我很高兴你能给我任何提示。

Answer 1

我觉得这个问题很混乱，但我认为这就是 OP 所要求的。 OP，如果没有，请在你的问题中提供更多细节——清理你的小提琴以更清楚地展示问题/预期的工作流程可能是一个很好的起点，因为现在，我真的不明白它在说明什么.

var items = document.getElementsByClassName("item");


function toggle(e) {
    e.currentTarget.classList.toggle('expanded');
}


for (var item of items)
{
  item.addEventListener("click", (e) => toggle(e));
}

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 400px;
  border: 1px solid black;
}

.item{
  min-width: 25%;
  max-width: 25%;
  transition: max-width 2s;
  height: 100px;
  padding: 2px;
  box-sizing: border-box;
  cursor: pointer;
}

.expanded{
   max-width: 100%;
   cursor: pointer;
   background-color: red;
}

.content{
  background-color: blue;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

<div class="container">

  <div class="item" id="2">
    <div class="content">
    Some short-ish content
    </div>
  </div>
  <div class="item" id="3">
    <div class="content">
      a;dfj;laksjdf;lkajsdf;ljas;dflkjasl;dfjl;aksfd;lasdfl;kjasl;kdfj
    </div>
  </div>
  <div class="item">
    <div class="content">
    
    </div>
  </div>
  <div class="item">
     <div class="content">
    
    </div>
  </div>
  <div class="item">
    <div class="content">
    
    </div>
  </div>
  <div class="item" id="last">
    <div class="content">
      afd;jasl;dfj la;sjdf ;laj dsf;la jsfdl;k jasdfl;kj al;kdf j;la fd
    </div>
  </div>


</div>

OP，如果您对我的实施有具体问题，请随时提出，但由于您的问题非常模糊，我不想花很多时间来解释它，直到我知道它实际上在回答问题。