html - 设置 with 的元素相同

Question

我使用 details 元素作为手风琴来托管过滤器菜单。而且我希望该元素具有与打开时相同的宽度。

这是我的过滤器菜单代码：

<div class="filter-accordian">
    <details>
        <summary>Filter</summary>
        <div class="filter-wrap">
            <div class="filter-group">
                <div class="label">Sted</div>
                <div class="filter-section">
                    <div>
                        <button role="button" class="filter">Oslo</button>
                        </div>
                        <div>
                                <button role="button" class="filter">Bergen</button>
                            </div>
                            <div>
                                <button role="button" class="filter">Stavanger</button>
                            </div>
                            <div>
                                <button role="button" class="filter">Trondheim</button>
                            </div>
                            <div>
                                <button role="button" class="filter">Sandnes</button>
                            </div>
                        </div>
            </div>
            <div class="filter-group">
                <div class="label">Merke</div>
                <div class="filter-section">
                    <div>
                        <button role="button" class="filter">Seat</button></div>
                    <div>
                        <button role="button" class="filter">Renault</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Toyota</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Nissan</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Hyundai</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Honda</button>
                    </div>
                    <div>
                            <button role="button" class="filter">Skoda</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Volvo</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Land rover</button>
                    </div>
                </div>
            </div>
            <div class="filter-group">
                <div class="label">Type</div>
                <div class="filter-section">
                    <div>
                        <button role="button" class="filter">Elektrisk</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Hydrogen</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Diesel</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Hybrid</button>
                    </div>
                </div>
            </div>
            <div class="filter-group">
                <div class="label">Side</div>
                <div class="filter-section">
                    <div>
                        <button role="button" class="filter">Flexidrive</button>
                    </div>
                        <div>
                            <button role="button" class="filter">Swap</button>
                        </div>
                    <div>
                        <button role="button" class="filter">Kinto</button>
                    </div>
                    <div>
                        <button role="button" class="filter">Imove</button>
                    </div>
                        <div>
                            <button role="button" class="filter">Volvo</button>
                        </div>
                    </div>
            </div>
        </div>
    </details>
</div>

我面临的问题是过滤器菜单在打开时约为 700px 宽，具体取决于屏幕尺寸。但在关闭时它只有 70px 宽

我的CSS：

summary {
  align-self: flex-start;
}
.filter-wrap {
  display: flex;
  margin-top: 1rem;
}
.filter-accordian {
  margin: auto;
  display: flex;
  padding: 1rem;
  width: fit-content;
  background: gray;
  color: white;
  margin-top: 1rem;
  box-shadow: 2px 2px 3px #000;
  border-radius: 2px;
  
}
.filter-group{
  display: flex;
  flex-direction: column;
  margin-right: 3px;
  box-shadow: 1px 2px 3px #000;
  padding-bottom: 5px;
  padding-right: 5px;
}
.filter-section {
  display: grid;
  grid-template-rows: repeat(3, 2.2rem);
  grid-auto-flow: column;
}
.label {
  background: black;
  padding-left: 5px;
  border-radius: 2px 2px 1px 1px;
  width: 100%;
  overflow: hidden;}

标签： htmlcssvue.jsflexbox