Question

我有侧边栏+内容布局。侧边栏并不总是在那里。在内容中，我有一个宽度较大的div（来自滑块）。

有关如何限制面板包装的任何想法，以便我们不会对内容本身造成任何溢出？

＆＃13;

.wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

}

.sidebar {
  background: #aaa;
}

.content {

}

.panel-wrapper {
  min-width: 100%;
  overflow: hidden;
}

.panel {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  
  background: pink;
  
  width: 5000px;
}

＆＃13;

  <div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus suscipit possimus facilis exercitationem blanditiis incidunt minus voluptatem modi veritatis molestias inventore provident deleniti quod 
      <div class="panel-wrapper">
        <div class="panel">
          <div>item1</div>
          <div>item2</div>
        </div>
      </div>
      vitae cupiditate delectus quam, dolorum rerum!</div>
  </div>

＆＃13;

Answer 1

假设你的.wrapper是全宽的。所以首先你应该给它max-width。我们假设我们给它一个max-width: "100vw"; 然后相应地确定侧边栏和内容的宽度：

宽度：300px;

宽度：计算（100vw - 300px）;

这是css的一个例子：

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 100vw; // Setting a width to your container
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.sidebar {
  width: 300px; // setting a width to your sidebar
  background: #aaa;
}

.content {
  width: calc(100vw - 300px); // and the width to your content, that depends on width of the sidebar and the whole area .wrapper
}

.panel-wrapper {
  min-width: 100%;
  overflow: hidden;
}

.panel {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

  background: pink;

  width: 5000px;
}

Flexbox使内容包装

1 个答案: