html - 布局 : fixed text box on the left with scrollable MDL cards on the right

Question

我在修复两个页面上的一些文本时遇到了问题。我左边有一个盒子，里面有一些文字，右边有两张包含对话的 MDL 卡片。

我的问题是，一旦我在文本的 CSS 中放置了一个固定位置术语，我的卡片就会与它重叠并重新向左对齐。我试图收容它们，但这似乎没有任何帮助，也许我做错了什么。

我喜欢它现在的样子，但我希望 MDL 卡片能够独立滚动。同样，可能是一个简单的修复和我忽略的东西，但这是我到目前为止所拥有的:

 <div class="mdl-layout__content">

        <main>

          <div class="boxed-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
            Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
            Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
            et pretium dui ante ac lectus.
          </div>

          <div class="cards">


            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button">View Product</button>

                  <dialog id="dialog" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 1</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>
           </div>

              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>

            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button-1">View Product</button>

                  <dialog id="dialog-1" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 2</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>

              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>
          </div>
        </div>
      </div>

        </main>

CSS:

 .boxed-1{
      width: 40%;
      height: auto; 
      text-align: justify;
      display: flex;
      /* position: fixed; */
      vertical-align: center;
      padding: 15px;
      margin: 20px;
      background-color: #fff;
      font-family: 'Courier New', Courier, monospace;
    }

    .mdl-layout__content main {
    display: flex;
    align-items: right;
    }

     .demo-card-wide.mdl-card {
      width: 100%;
      /* margin-left: 90%; */
      font-family: 'Courier New', Courier, monospace;
      /* position: relative; */
    }

    .demo-card-wide > .mdl-card__title {
      color: #cccccc;
      height: 430px;
      background: url('images/placeholder.jpg') 0px;

    }

    .demo-card-wide > .mdl-card__menu {
      color: #fff;
    }

Answer 1

您的 .boxed-1 和 .cards 元素为您的 flex 布局的左右部分保留空间，因此更改 .boxed-1 到 position: fixed 会破坏布局。在不过多改变当前方法的情况下，简单的修复方法是将文本包装在另一个 div 中并将其设置为 position: fixed，因此 .boxed-1 仍保留您在 flex 布局中所需的空间，新的 div 可防止文本滚动。您将需要一些额外的 CSS 来确保新的 div 不会与其他元素重叠。

示例 HTML:

<main>
  <div class="boxed-1">
    <div class="fixed">
      Lorem ipsum...
    </div>
  </div>
  <div class="cards">
    <!-- cards html -->
  </div>
</main>

示例 CSS:

main {
  display: flex;
}

.boxed-1 {
  width: 30vw;
  background-color: #fff;
  font-family: 'Courier New', Courier, monospace;
  text-align: justify;
}

.cards {
  width: 70vw;
}

.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  width: calc(30vw - 40px);
}