网格内的 CSS Flexbox。父母没有得到全宽答案

【问题标题】：CSS Flexbox inside Grid. Parent not getting full width网格内的 CSS Flexbox。父母没有得到全宽
【发布时间】：2022-06-17 23:03:53
【问题描述】：

在我的 CSS 网格内的 flexbox 中，父级（网格）在第二列上没有获得其子级的全宽。问题可能与“grid-template-columns”有关，但我找不到解决方案。

https://codepen.io/francisbbelisle/pen/poaeaZQ

目标：https://postimg.cc/svsQQ8z8 问题：https://postimg.cc/f3fTNWtR

$spacing: 4rem;

body {
  background-color: #353535;
  overflow-x: hidden;
  text-size-adjust: 100%;
 }

.cat {
  background-color: #222;
  padding: 0;
  height: 100vh;

  h2 {
    font-size: 3em;
    text-align: center;
  }
  
  h3 { font-size: 1.5em }

  p { font-size: .75em }

  span {
    font-weight: bold;
    text-align: right;
    float: right;
    margin-left: 2em;
  }

  .wrapper {
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow-x: scroll;

    div {
        margin: $spacing;
        padding: $spacing;
        background-color: #ffffff;
        display: flex;
        max-height: calc(100vh - #{$spacing}*4 );
        column-gap: $spacing;
        flex-direction: column;
        flex-wrap: wrap;
    }

    ul {padding: 0}
    li { width: 33vw; list-style-type: none; }

  }

}

<section class="cat">
      <div class="wrapper">
            <div>
              <h2>Menu 1</h2>
              <h3>Cat 1</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>

              <h3>Cat 2</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>
            </div>
        
            <div>
              <h2>Menu 2</h2>
              <h3>Cat 1</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>

              <h3>Cat 2</h3>
              <br>
              <ul>
                <li>Item 1<span></span><span>00</span><p>Description</p></li>
                <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                <li>Item 3<span></span><span>00</span><p>Description</p></li>
                <li>Item 4<span></span><span>00</span><p>Description</p></li>
              </ul>
              <br>
            </div>
        
      </div>
    </section>

编辑 2022-05-18 我已经简化了我的代码。列和间隙需要固定宽度。 flex 宽度需要与他的内容相同。该页面需要可滚动才能看到。我对“列：自动 200px”有同样的问题。

https://codepen.io/francisbbelisle/pen/vYdmxVw

截屏：https://postimg.cc/zLmwGsrM

【问题讨论】：

你能澄清一下哪个元素是目标吗？它看起来像 div 内部的唯一 flex 元素 .wrapper 是唯一的网格元素。所以没有带有 flex 父级的网格
更好的问题是你到底想做什么？期望的结果是什么？
希望这会有所帮助：postimg.cc/svsQQ8z8 抱歉，如果我的代码不清楚。这是一个完整网站的简单版本。

标签： css flexbox css-grid

【解决方案1】：

您需要为我们绘制一张您希望它的外观的图片，然后我们可以帮助您实现目标。

请注意，在您的代码中，弹性框位于网格内部，而不是相反。

我想出了下面的示例……这是否越来越接近您想要的？

body {
  background-color: #353535;
  overflow-x: hidden;
  text-size-adjust: 100%;
  margin: 0;
}

.cat {
  background-color: #222;
  padding: 0;
  height: 100vh;
}
.cat h2 {
  font-size: 3em;
  margin-top: 0;
}
.cat h3 {
  font-size: 1.5em;
}
.cat p {
  font-size: 0.75em;
}
.cat span {
  font-weight: bold;
  text-align: right;
  float: right;
  margin-left: 2em;
}
.cat .wrapper {
  padding: 2em;
  display: grid;
  grid-template-columns: 2fr 1fr;
  overflow-x: scroll;
  border: 3px solid yellow;
  gap: 2em;
}
.cat .wrapper>div {
  padding: 2rem;
  background-color: #ffffff;
  border: 3px solid red;
}
.cat .wrapper ul {
  padding: 0;
}
.cat .wrapper li {
  list-style-type: none;
}
.columns {
  columns: 2;
  gap: 2em;
}

<section class="cat">
      <div class="wrapper">
            <div>
              <div class="columns">
                <h2>Menu 1</h2>
                <h3>Cat 1</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

                <h3>Cat 2</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

                <h3>Cat 3</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>
              </div>
            </div>
        
            <div>
              <div class="no-columns">
                <h2>Menu 2</h2>
                <h3>Cat 1</h3>
                <br>
                <ul>
                  <li>Item 1<span></span><span>00</span><p>Description</p></li>
                  <li>Item 2<span>00</span><span>00</span><p>Description</p></li>
                  <li>Item 3<span></span><span>00</span><p>Description</p></li>
                  <li>Item 4<span></span><span>00</span><p>Description</p></li>
                </ul>
                <br>

              </div>
            </div>
        
      </div>
    </section>

【讨论】：

感谢布雷特的回答。这是我试图实现的：postimg.cc/svsQQ8z8 问题是第二列：postimg.cc/f3fTNWtR
您的 codepen 显示案例 2 - 您能描述案例 1 的不同之处吗？
好的，我已经编辑了sn-p。对于您正在做的事情，CSS 列属性将比 flexbox 更好地工作。 w3schools.com/css/css3_multiple_columns.asp
有一种方法可以使列数根据内容的长度进行设计响应？
是的，Francis，您可以设置列数，也可以设置宽度，它会计算出适合多少凸轮。

【解决方案2】：

经过大量研究，我找到了这种“写作模式”的解决方案。 https://stackoverflow.com/a/41209546

【讨论】：