Question

Flexbox不尊重我提供的宽度，但是尊重子元素的宽度。谁能解释为什么？

我已经设置了一个html外观的示例，所有不必要的代码都被剥离。但是，使用JS组件（vue在这种情况下实际上并不重要）时，该结构基本上是构建的。

<div class="row container">
  <div class="col">
    <div class="row container">
      <div class="col col1">
        <div class="row">
          <div class="content">test1</div>
          <div class="content">test2</div>
          <div class="content">test3</div>
        </div>
      </div>
      <div class="col col2">test2</div>
    </div>
  </div>
</div>

CSS：

.row {
  display: flex;
  width: 100%;
  max-width: 100%
}

.container {
  max-width: 100%;
}

.content {
  min-width: 300px;
}

.col1 {
  background-color: lightblue;
  flex-grow: 1;
  overflow-x: auto;
  flex-shrink: 1;
}

.col2 {
  background-color: salmon;
  min-width: 300px;
 }

这里也是JS小提琴的链接，用于重现：https://codepen.io/reijnemans/pen/WNNKXGp

预期结果：.container的宽度为100％；和.col1应该有一个滚动条来滚动所有.content项。关于flexbox

的html结构无法更改

JS小提琴手第一个示例有一个错误的示例，第二个示例很好，但是flexbox少了一层，不幸的是，在我的情况下是不可能的。（第二个示例仅在没有外部行和col的情况下具有相同的结构）

为什么Flexbox嵌套时不尊重宽度？

0 个答案: