CSS 90 *旋转div不能使文本（宽度限制旋转） - 使用flexbox

Question

所以我试图在右侧制作一个标签，如下图所示：

我希望右边的div只有25px宽度，我使用flexbox for div来保存紫色参数列表以及右边的选项卡。

当我为此flexbox设置25px时，我在其中旋转的div占用了25px的宽度，因此我无法将＆＃34;参数＆＃34;标题。请告诉我应该怎么做，谢谢！

代码，React JS文件：

return (
    <div className='flexbox-parent-console overflow-hidden'>
        <div className='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
            <PostListArray />
        </div>
        <div className='bg-black-10 w25p self-center  bg-light-gray'>
            <div className='r90 rotateddiv'>
                Parameters
            </div>
        </div>
    </div>
)

CSS：

.flexbox-parent-console {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}
.self-center {
    -ms-flex-item-align: center;
    align-self: center
}
.overflow-hidden {
    overflow: hidden
}
.fill-area-content {
    overflow: auto;
}
.r90 {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateddiv {
    width 300px;
    height: 24px;
    text-align: center;
    background: green;
}
//Non Essentials
.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}

Answer 1

这是我能帮到你的最好方法。

您可以更新.post-list-section min-height CSS值（或在其上添加内容）以查看位置更新

解决方案是为旋转元素添加受控宽度（即使没有视觉效果），并在旋转元素之前从此尺寸的一半进行平移。

＆＃13;

＆＃13;

.flexbox-parent-console {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #EEE;
}
.post-list-section {
  min-height: 300px;
  width: calc(100% - 1.5em);
  background: #ABB;
}
.nav-section {
  margin: auto 0; 
  width: 1.5em;
  line-height: 1.5em;
  height: 100%;
}
.nav-section > div {
    width: calc(200px + 1.5em);
    margin: 0;
    text-align: center;
    transform-origin: 50% 50%;
    transform: translateX(-100px) rotate(90deg);
    position: relative;
}

＆＃13;

     <div class='flexbox-parent-console overflow-hidden'>
        <div class='post-list-section'>
            Post list
        </div>
        <div class='nav-section'>
            <div>
                Parameters
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以查看writing-mode

＆＃13;

＆＃13;

.vertical-lr {
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  /* actually 
  writing-mode:sideways-lr; would be the one , but not avalaible everywhere so, let's transform */
  transform: scale(-1, -1);
  background: green;
  text-align: center;
  width: 1.5em;
  line-height: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.flex {
  display: flex;
}
/* did you mean  this ? */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.5em;
}

.fill-area-content {
  overflow: auto;
  flex: 1;
  height: 100%;
}

/* your code */
.flexbox-parent-console {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
}

.self-center {}

.overflow-hidden {
  overflow: hidden
}

.rotateddiv {
  width 300px;
  height: 24px;
  text-align: center;
  background: green;
}

.b--light-gray {
  border-color: #eee
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, .1)
}

.bw2 {
  border-width: .25rem
}

.b--solid {
  border-style: solid
}

.pa2 {
  padding: .5rem
}

＆＃13;

<div class='flexbox-parent-console overflow-hidden'>
  <div class='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class='bg-black-10 w25p flex  bg-light-gray'>
    <div class=' vertical-lr'>
      Parameters
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;