时间戳

首页 > 解决方案 > 使用overflow-x在flex内部弯曲

html - 使用overflow-x在flex内部弯曲

问题描述

我想内联创建 2 列。第一列的固定宽度为 200 像素，第二列应占据屏幕的其余部分。第二列应在 x 轴上自动滚动。我一直在尝试使用 flex，但我对标记感到非常困惑。有人可以解释我做错了什么。

小路：html

<section className="container">
  <div className="container-name">1</div>
  <div className="container-time">
    <div className="element">
      222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
    </div>
  </div>
</section>

小路： CSS

.container {
  flex: 0 0 auto;
}

.container-name {
  width: 200px;
  border: 1px dotted;
}

.container-time {
  flex: 0 0 auto;
  border: 1px solid;
}

.element {
  display: flex;
  overflow-x: auto;
}

标签： htmlcss

解决方案

希望这个解决方案对您有所帮助！

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  min-height: 100vh;
}

.container .split {
  position: relative;
  width: 100%;
  height: 100%;
}

.container .split__left {
  max-width: 400px;
  background-color: coral;
}

.container .split__right {
  padding: 2rem;
  overflow-x: scroll;
  background-color: pink;
}

.container .split__right p {
  white-space: nowrap;
}
<div class="container">
  <div class="split split__left"></div>
  <div class="split split__right">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
  </div>
</div>

[注意]在更大的屏幕上看到这个。

推荐阅读