时间戳

首页 > 解决方案 > 可滚动的弹性项目 - 如何让宽度等于内容

html - 可滚动的弹性项目 - 如何让宽度等于内容

问题描述

我有一个带有垂直长菜单的部分和一个带有小内容的部分，所以我希望高度尺寸等于最小的一个和带有滚动条的长菜单。

使用纯 CSS，我试试这个：

html * {
  box-sizing: border-box;
}

.header,
.footer,
.content,
.sidebar,
.flex-box {
  border: 1px solid black
}

.flex-box {
  display: flex;
}

.sidebar {
  flex: 1;
  position: relative;
}

.content {
  flex: 1;
}

.scroll {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute !important;
  display: -ms-flexbox !important;
  display: flex !important;
  overflow-y: auto;
  direction: rtl;
}
<div class="example">
  <div class="header">
    <p>This is the horizontal header bar</p>
  </div>
  <div class="flex-box">
    <div class="sidebar">
      <div class="scroll">
        <div class="menu">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
            <li>item 10</li>
            <li>item 11</li>
            <li>item 12</li>
            <li>item 13</li>
            <li>item 14</li>
            <li>item 15</li>
            <li>item 16</li>
            <li>item 17</li>
            <li>item 18</li>
            <li>item 19</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet consectetuer netus interdum dis at et. In mauris nunc tempor Curabitur consequat tortor urna nonummy montes nibh. Egestas et Nunc tristique ullamcorper faucibus libero commodo sociis sagittis laoreet. Odio eros dignissim
        et laoreet volutpat Donec massa id metus fermentum. Lorem nibh eros Integer In ullamcorper Donec sed quis non condimentum. Lorem non Phasellus Curabitur vel.</p>
    </div>
  </div>
  <div class="footer">
    <p>footer</p>
  </div>
</div>

不幸的是，我无法为侧边栏提供正确的尺寸，我希望它等于他的内容。

所以我尝试了另一种解决方案，但在这种情况下，内容维度错误并且侧边栏重叠内容。

html * {
  box-sizing: border-box;
}

.header,
.footer,
.content,
.sidebar,
.flex-box {
  border: 1px solid black
}

.flex-box {
  display: flex;
}

.sidebar {
  display: flex;
  position: relative;
}

.scroll {
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute !important;
  display: -ms-flexbox !important;
  display: flex !important;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  direction: rtl;
  color: white
}

.menu {
  direction: ltr;
  white-space: nowrap
}

.content {
  flex: 1;
}
<div class="header">
  <p>This is the horizontal header bar</p>
</div>
<div class="flex-box">
  <div class="sidebar">
    <div class="scroll">
      <ul class="menu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 9</li>
        <li>item 10</li>
        <li>item 11</li>
        <li>item 12</li>
        <li>item 13</li>
        <li>item 14</li>
        <li>item 15</li>
        <li>item 16</li>
        <li>item 17</li>
        <li>item 18</li>
        <li>item 19</li>
      </ul>
    </div>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetuer netus interdum dis at et. In mauris nunc tempor Curabitur consequat tortor urna nonummy montes nibh. Egestas et Nunc tristique ullamcorper faucibus libero commodo sociis sagittis laoreet. Odio eros dignissim
      et laoreet volutpat Donec massa id metus fermentum. Lorem nibh eros Integer In ullamcorper Donec sed quis non condimentum. Lorem non Phasellus Curabitur vel.</p>
  </div>
</div>
<div class="footer">
  <p>footer</p>
</div>

最后，我添加了一个简单的 javascript，它可以将侧边栏宽度尺寸动态更改为 vmenu 尺寸，这很有效，但我想知道如何在没有 javascript 的情况下实现这一点。

欢迎使用任何其他方法，但如您所见，我不想插入固定宽度或高度指令，并且布局适合侧边栏内容的宽度大小。

标签： htmlcssflexbox

解决方案

position:absolute 是罪魁祸首，您可以删除它并考虑另一个技巧。使滚动元素的高度等于 0，这样它就会溢出。默认情况下，它的父元素将在 flex 容器内拉伸，因此它将填充由 content 定义的高度，然后添加overflow:auto.

之后，只需继续flex:1内容

html * {
  box-sizing: border-box;
}

.header,
.footer,
.content,
.sidebar,
.flex-box {
  border: 1px solid black
}

.flex-box {
  display: flex;
}

.sidebar {
  overflow-y: auto;
}

.content {
  flex: 1;
}

.scroll {
  height:0;
  display: flex;
  direction: rtl;
}
<div class="example">
  <div class="header">
    <p>This is the horizontal header bar</p>
  </div>
  <div class="flex-box">
    <div class="sidebar">
      <div class="scroll">
        <div class="menu">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>long item</li>
            <li>item 10</li>
            <li>item 11</li>
            <li>item 12</li>
            <li>item 13</li>
            <li>item 14</li>
            <li>item 15</li>
            <li>item 16</li>
            <li>item 17</li>
            <li>item 18</li>
            <li>item 19</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet consectetuer netus interdum dis at et. In mauris nunc tempor Curabitur consequat tortor urna nonummy montes nibh. Egestas et Nunc tristique ullamcorper faucibus libero commodo sociis sagittis laoreet. Odio eros dignissim
        et laoreet volutpat Donec massa id metus fermentum. Lorem nibh eros Integer In ullamcorper Donec sed quis non condimentum. Lorem non Phasellus Curabitur vel.</p>
    </div>
  </div>
  <div class="footer">
    <p>footer</p>
  </div>
</div>

推荐阅读