Question

我在一个伸缩容器中需要两个伸缩项目。

左侧的一个项目具有固定的大小，右侧的另一个项目在不超过窗口宽度的情况下填充了剩余空间。

我尝试在jsfiddle上执行此操作，但遇到了以下问题：当我尝试将某些项目放入右侧项目内的flex容器中时，它超出了父级的宽度。

如何防止这种情况？

html

<div class="container">
    <div class="side"></div>
    <div class="right">
        <div class="flex">
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
            <div class="large"></div>
        </div>
    </div>
</div>

scss

html, body{
  margin: 0;
  height:100%;
}
.container {
display: flex;
  height: 100%;

  .side{
    flex: 0 0 auto;
    width:3em;
    background: yellow;
  }

  .right{
    display:flex;
    flex: 1 0 auto;
    background: blue;
  }
}

.large{
  width:120px;
  height:1em;
  background: green;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

Answer 1

在您的代码中，您有以下内容：

.right {
  display: flex;
  flex: 1 0 auto;
  background: blue;
}

flex的缩写形式为：

flex-grow: 1
flex-shrink: 0
flex-basis: auto

由于您拥有flex-shrink: 0，因此伸缩项目（也是伸缩容器）无法收缩。

您还将flex-basis设置为auto，从而允许该项目根据内容大小进行扩展。

将它们放在一起，便有了一个Flex容器，没有理由包装和溢出内容。

您需要（1）启用flex-shrink或（2）切换到flex-basis: 0。

对您的代码进行此调整：

.right {
  display: flex;
  flex: 1 1 auto; /* fs: 1 (formerly 0) */
  background: blue;
}

OR

.right {
  display: flex;
  flex: 1; /* fg: 1, fs: 1, fb: 0 */
  background: blue;
}

.container {
  display: flex;
  height: 100vh;
}

.side {
  flex: 0 0 auto;
  width: 3em;
  background: yellow;
}

.right {
  display: flex;
  flex: 1 1 auto; /* adjustment */
  background: blue;
}

.large {
  width: 120px;
  height: 1em;
  background: green;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

body {
  margin: 0;
}

<div class="container">
  <div class="side"></div>
  <div class="right">
    <div class="flex">
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
      <div class="large"></div>
    </div>
  </div>

</div>

Answer 2

我相信这里有您要查找的内容的摘要。红色容器具有显示：flex，左侧的蓝色元素具有固定的宽度，绿色容器占据剩余的宽度。右内元素包含在绿色元素内，每个元素占据相同的空间。

.container {
  height: 400px;
  width: 100%;
  background-color: red;
  display: flex;
}
.container .left {
  width: 200px;
  height: 200px;
  background-color: blue;
}
.container .right {
  height: 200px;
  background-color: green;
  flex: 1;
  display: flex;
}
.container .right .inside-right {
  height: 100px;
  background-color: yellow;
  flex: 1;
  border: 2px solid black;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div class="inside-right">
    
    </div>
        <div class="inside-right">
    
    </div>
        <div class="inside-right">
    
    </div>
        <div class="inside-right">
    
    </div>
        <div class="inside-right">
    
    </div>
        <div class="inside-right">
    
    </div>
  </div>
</div>

如何防止孩子超过其在Flexbox中的父宽度？

2 个答案: