时间戳

首页 > 解决方案 > 如何防止孩子在flexbox中超出其父宽度？

html - 如何防止孩子在flexbox中超出其父宽度？

问题描述

我需要一个弹性容器中的两个弹性项目。

左侧的一项具有固定大小，右侧的另一项填充剩余空间而不超过窗口的宽度。

我试图在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;
}

标签： htmlcsssassflexbox

解决方案

在你的代码中，你有这个：

.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，允许项目根据内容大小进行扩展。

把它们放在一起，你就有了一个弹性容器，没有理由包装和溢出内容。

您需要 (1) 启用flex-shrink或 (2) 切换到flex-basis: 0.

对您的代码进行此调整：

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

或者

.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>

推荐阅读