Как заставить одну из двух строк в центральном столбце определять ширину этого столбца с помощью Flex? - PullRequest
Новая
       1

Как заставить одну из двух строк в центральном столбце определять ширину этого столбца с помощью Flex?

0 голосов
/ 06 апреля 2020

Кто-нибудь знает, как позволить меньшей красной полосе определить ширину среднего столбца и позволить обернуть розовый абзац, чтобы уменьшить его размер до красного? 

  * {
    margin: 0;
    padding: 0;
    border: 0;
  }
<div style="display: flex; flex-direction: row;"> 
  <div style="background-color: blue; flex: 1;"></div>
  <div style="display: flex; flex-direction: column;"> 
    <p style="background-color: red;">
      i want this paragraph
      to set the width but i can't
      figure it out :(</p>
    <p style="background-color: pink;">i want this
      paragraph to wrap to fit the
      width of
      the paragraph above asdfdasf
    </p>
  </div>

  <div style="background-color: indigo; flex: 1;"></div>

</div>

1 Ответ

0 голосов
/ 08 апреля 2020

Ну вот ответь всем: 

<html>
  <head>
  <style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }
  </style>
  </head>

  <body>
  <div style="display: flex; flex-direction: column;">

    <div style="display: flex; flex-direction: row;">
      <div style="background-color: blue; flex: 1;"></div>
      <div id="setter" style="">
        <p style="background-color: red;">
        i want this paragraph
        to set the width but i can't
        figure it out :(</p>
      </div>
      <div style="background-color: blue; flex: 1;"></div>
    </div>



    <div style="display: flex; flex-direction: row;">
    <div style="background-color: blue; flex: 1;"></div>
      <div id="copier" style="background-color: lightgreen;">
        <p style="">i want this
          paragraph to wrap to fit the
          width of
          the paragraph above asdfdasf</p>
      </div>
      <div style="background-color: blue; flex: 1;"></div>
    </div>

    <script type="text/javascript">
    var theft=document.getElementById('setter').offsetWidth;
    document.getElementById('copier').style.width=theft;
    </script>



  </div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...