首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Css flexbox列溢出

Css flexbox列溢出
EN

Stack Overflow用户
提问于 2018-06-30 07:26:34
回答 1查看 3.1K关注 0票数 2

如何避免在flex列中发生水平溢出?例如,我有以下标记:

.container {
    display: flex;
}

.left, .right {
    height: 300px;
}

.left {
    flex: 0 0 300px;
    background-color: pink;
}

.right {

    flex: 1 0;
    background-color: lightblue;
}

.inner-container{
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;

    /*for testing purpose*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>

正如你所看到的,在flex容器中有两个项目:左边的一个是300px宽的,右边的一个占据了容器内的所有剩余空间。如果我要在右flex列中添加另一个全宽容器,它会导致水平溢出。如何防止这种行为?谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-30 07:30:22

将添加到.inner-container

.container {
  display: flex;
}

.left,
.right {
  height: 300px;
}

.left {
  flex: 0 0 300px;
  background-color: pink;
}

.right {
  flex: 1 0;
  background-color: lightblue;
}

.inner-container {
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  /*for testing purpose*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box; /* NEW */
}
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51110490

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档